无法点按移动设备上的Google自动填充列表中的商品

Question

我正在使用Phonegap和HTML制作移动应用.现在我正在使用谷歌地图/地方自动完成功能.问题是:如果我在我的计算机上的浏览器中运行它一切正常,我选择一个建议使用自动完成列表 - 如果我在我的手机上部署它我仍然得到建议,但我无法点击一个.看起来"建议覆盖"似乎被忽略了,我可以点击页面.是否有可能将重点放在建议列表或某种方式？希望可以有人帮帮我.提前致谢.

Answer 1

确实存在与FastClick和PAC的冲突.我发现我需要在pac-item及其所有子项中添加needsclick类.

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

Answer 2

目前github上有一个pull请求,但尚未合并.

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

补丁添加了一个excludeNode选项,允许您通过regex排除fastclick处理的DOM节点.这是我使用它来使用fastclick进行谷歌自动完成工作的方式:

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

Answer 3

这个回复可能为时已晚.但可能对其他人有帮助.

我有同样的问题,经过几个小时的调试后,我发现这个问题是因为添加了"FastClick"库.删除后,它照常工作.

因此,对于fastClick和google建议,我已在地理自动填充中添加了此代码

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
         });
    });
}

Answer 4

如果您使用的是Framework 7,则它具有FastClicks的自定义实现.而不是needsclick班级,F7有no-fastclick.以下功能是它在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其所有子项中

Answer 5

我遇到了同样的问题，我意识到问题是什么，可能 pac-container 的 focusout 事件发生在 pac-item 的 tap 事件之前（仅在phonegap内置浏览器中）。

我解决这个问题的唯一方法是在输入聚焦时添加 padding-bottom 并更改 pac-container 的 top 属性，以便 pac-container 位于输入的边框内。

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

虽然很脏，但是有用