无法在移动设备上使用Google自动完成列表中的项目

Question

我正在使用 Phonegap 和 HTML 制作一款移动应用。现在我正在使用 Google 地图/地点自动完成功能。问题是：如果我在我的计算机上的浏览器中运行它，一切都运行良好，并且我可以从自动完成列表中选择一个建议 - 如果我部署到我的手机上，我仍然会得到建议，但我无法点击其中一个。似乎“建议覆盖层”被忽略了，我可以在页面上点击。是否有可能将焦点放在建议列表上或以某种方式实现这样？希望有人能帮助我。提前感谢。

- Mike Äfer

---

没有人有解决方案吗？不幸的是，pac-container或pac-item上的z-index不起作用。 - Mike Äfer

Answer 1

FastClick和PAC确实存在冲突。我发现我需要在pac-item及其所有子元素上添加needsclick类。

$(document).on({
    'DOMNodeInserted': function() {
        $('.pac-item, .pac-item span', this).addClass('needsclick');
    }
}, '.pac-container');

- Space Devin

---

此解决方案使用了一个已弃用的功能；此外，它可能会导致性能问题。 - Stephen

对我来说这不起作用。我将其放在我的代码中，看到“needsclick”类已添加到所有对象中，但问题仍然存在。当我轻敲时，没有任何反应。 - André Perazzi

可以用。谢谢！ - pmuens

谢谢你救了我的一天。完美地工作了。 - Vishal Rajole

哎呀呀...我爱你！ - Jacopo Penzo

Answer 2

目前在Github上有一个拉取请求，但这还没有合并。

但是，您可以简单地使用此修补版本的fastclick。

该修补程序添加了excludeNode选项，使您可以通过正则表达式排除由fastclick处理的DOM节点。这就是我如何使用它使Google自动完成与fastclick配合使用的方法：

FastClick.attach(document.body, {
  excludeNode: '^pac-'
});

- epegzz

---

这是目前为止最好的答案，我不知道为什么它没有得到更高的评分... - David Addoteye

Answer 3

如果您正在使用Framework 7，则它具有FastClicks的自定义实现。 F7使用no-fastclick而不是needsclick类。以下是F7中实现它的函数：

 function targetNeedsFastClick(el) {
   var $el = $(el);
   if (el.nodeName.toLowerCase() === 'input' && el.type === 'file') return false;
   if ($el.hasClass('no-fastclick') || $el.parents('.no-fastclick').length > 0) return false;
   return true;
 }

如其他评论所建议的那样，您只需将.no-fastclick类添加到.pac-item及其所有子元素中即可。

- Somy Ericsson

---

非常感谢，我像这样修复了 $（document）.on（{ 'DOMNodeInserted'：function（）{ $（this）中的$（'.pac-item，.pac-item span'）。addClass（'no-fastclick'）; } }，'.pac-container'）; - Albert

您值得获得许多的喜欢。 :) - Himanshu Tyagi

Answer 4

这个回复可能有点晚了，但对其他人可能会有帮助。

我遇到了相同的问题，经过数小时的调试，我发现这个问题是因为添加了"FastClick"库。删除它后，它恢复正常工作。

因此，为了实现快速点击和谷歌建议，在地理位置自动完成中添加了这段代码。

jQuery.fn.addGeoComplete = function(e){
    var input = this;
    $(input).attr("autocomplete" , "off");
    var id = input.attr("id");
    $(input).on("keypress", function(e){
        var input = this;
        var defaultBounds = new google.maps.LatLngBounds(
          new google.maps.LatLng(37.2555, -121.9245),
          new google.maps.LatLng(37.2555, -121.9245));

        var options = {
            bounds: defaultBounds,
            mapkey: "xxx"
        };

        //Fix for fastclick issue
        var g_autocomplete = $("body > .pac-container").filter(":visible");
        g_autocomplete.bind('DOMNodeInserted DOMNodeRemoved', function(event) {
            $(".pac-item", this).addClass("needsclick");
        });
        //End of fix

        autocomplete = new google.maps.places.Autocomplete(document.getElementById(id), options);
         google.maps.event.addListener(autocomplete, 'place_changed', function() {
             //Handle place selection
         });
    });
}

- Saravanan S

---

+1！z-index的解决方案对我没用。在我的情况下，FastClick是罪魁祸首。非常感谢！我已经将此评论链接到我的原始问题https://dev59.com/7HPYa4cB1Zd3GeqPim2R#17162343中，以供其他遇到这个问题的人参考。 - danwild

@saravanan，你有非jQuery的解决方案吗？ - EmptyData

Answer 5

我曾经遇到过同样的问题，后来我发现问题可能是在PAC-container 的 focusout 事件在PAC-item 的 tap 事件之前发生了 （仅适用于phonegap内置浏览器）。

唯一解决这个问题的方法是在输入框获得焦点时添加 padding-bottom，并改变 PAC-container 的 top 属性，以使 PAC-container 位于输入框边界内。

因此，当用户点击列表中的项目时，不会触发 focusout 事件。

虽然有些不太优美，但它起作用。

- Adam Klein

---

Adam，你能更好地解释一下你的解决方案是如何工作的吗？ - André Perazzi

Answer 6

对我来说完美地运作了：

$(document).on({
    'DOMNodeInserted': function() {
        $('.pac-item, .pac-item span', this).addClass('needsclick');
    }
}, '.pac-container');

配置：Cordova / iOS iPhone 5

- Nalsuor