工作灯的 Google 地方信息自动完成问题 - 无法点击答案

【问题标题】：Google Places Autocomplete Issue with worklight - can't tap工作灯的 Google 地方信息自动完成问题 - 无法点击
【发布时间】：2014-08-29 19:35:18
【问题描述】：

我正在尝试让 Google Places Autocomplete API 在 WorkLight 上运行，但看起来有问题。

使用计算机的浏览器时，一旦我开始输入地点名称，自动完成建议就会正常工作，我可以选择一个。但是在移动设备（Android 或 iPhone）上运行应用程序时，我能够看到自动完成结果，但当我点击它们时没有任何反应。

我发现一些 js 库可以更轻松地让 GooglePlaces Autocomplete API 工作 - 我的意思是，除了在移动设备上（WorkLight / Cordova 应用程序）

我还发现一些人报告了科尔多瓦的问题。有些人可以通过向 google 的元素添加“needclick”类来解决问题，但这对我不起作用

这是一个用于测试的 JS 库： http://ubilabs.github.io/geocomplete/

具有相关问题的 StackOverflow 链接：

can't tap on item in google autocomplete list on mobile

有人对可能的解决方案有任何想法吗？

【问题讨论】：

如果你能提供一个演示项目会很有帮助...

标签： cordova ibm-mobilefirst google-places-api google-places worklight-runtime

【解决方案1】：

如果你使用Ionic，问题是由ionicModal设置的css属性“pointer-events:none”引起的；

尝试将此添加到您的 css 文件中：

.pac-container {
     pointer-events:auto;
}

【讨论】：

【解决方案2】：

尝试停止传播

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>event.stopImmediatePropagation demo</title>
  <style>
  p {
    height: 30px;
    width: 150px;
    background-color: #ccf;
  }
  div {
    height: 30px;
    width: 150px;
    background-color: #cfc;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p>paragraph</p>
<div>division</div>

<script>
$( "p" ).click(function( event ) {
  event.stopImmediatePropagation();
});
$( "p" ).click(function( event ) {
  // This function won't be executed
  $( this ).css( "background-color", "#f00" );
});
$( "div" ).click(function( event ) {
  // This function will be executed
  $( this ).css( "background-color", "#f00" );
});
</script>

</body>
</html>

【讨论】：

【解决方案3】：

您是否尝试过停止传播点击事件？

$( "p" ).click(function( event ) { event.stopPropagation(); // 做 });

【讨论】：

【解决方案4】：

我刚试过，对我来说效果很好。这就是我所做的，如果您做了任何不同的事情，请告诉我们

创建了一个新的混合应用
将 jquery.geocomplete.js 添加到 common/js 文件夹中
用api提供的代码示例更新了index.html代码文档
在通用预览版上测试（工作正常）
创建了一个 android 环境并在 Nexus 7 设备上执行它(android 4.4.2) - 运行良好。

“工作正常”是指我可以在输入文本字段时看到提供的选项列表，我可以点击其中一个选项，它将填充文本字段。

这是 index.html 的代码

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>googleplaces</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
        <!--
            <link rel="shortcut icon" href="images/favicon.png">
            <link rel="apple-touch-icon" href="images/apple-touch-icon.png"> 
        -->
        <link rel="stylesheet" href="css/main.css">
        <style type="text/css" media="screen">
        form {
            background: url(https://developers.google.com/maps/documentation/places/images/powered-by-google-on-white.png) no-repeat center right;
        }
</style>
        <script>window.$ = window.jQuery = WLJQ;</script>
    </head>
    <body style="display: none;">
        <form>
      <input id="geocomplete" type="text" placeholder="Type in an address" size="90" />
      <input id="find" type="button" value="find" />
    </form>

        <script src="js/initOptions.js"></script>
        <script src="js/main.js"></script>
        <script src="js/messages.js"></script>
        <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script src="js/jquery.geocomplete.js"></script>

        <script>
  $(function(){

    $("#geocomplete").geocomplete()
      .bind("geocode:result", function(event, result){
        $.log("Result: " + result.formatted_address);
      })
      .bind("geocode:error", function(event, status){
        $.log("ERROR: " + status);
      })
      .bind("geocode:multiple", function(event, results){
        $.log("Multiple: " + results.length + " results found");
      });

    $("#find").click(function(){
      $("#geocomplete").trigger("geocode");
    });



  });
    </script>
    </body>
</html>

【讨论】：