Google地方自动填充功能与Jquery Mobile无法在移动/触摸设备上运行

Question

标题显示我正在使用JQuery Mobile(1.3.0)构建移动网站,并且正在尝试实施Google Places Autocomplete(API v3)以帮助用户输入位置数据.

自动完成功能在桌面设备上正常运行,但在移动设备上使用时无法正常运行(我仅在iOS 6上进行过测试).

在移动设备上使用时,会显示相关位置的下拉列表,但是当您按下一个而不在地图上加载选择时,它就会消失.

我环顾四周,看到了一些可以看到z-index的解决方案

的.pac容器

作为罪魁祸首(见:http://osdir.com/ml/google-maps-js-api-v3/2012-01/msg00823.html).

我已经实现了这些修复,但无济于事,我不相信z-index是问题,因为我可以看到所选项目确实改变了它:在移动设备上按下时悬停状态/颜色.

如果有人有任何建议,我很满意,需要更多详情让我知道.

Answer 1

Saravanan的回答有点矫枉过正.要修复与FastClick和PAC的冲突,请将needsclick类添加到pac-item及其所有子项.

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

Answer 2

谢谢丹尼尔。但我给出的解决方案对性能有一定影响。

我对 FastClick 库做了一些修改来实现这一点。

首先，我向 FastClick 构造函数添加了一个参数，其中defaultElCls包含不应实现 fastclick 的元素。

function FastClick(layer, defaultElCls) {
    'use strict';
    var oldOnClick, self = this;

    this.defaultElCls = defaultElCls;

然后修改needsClick方法：

FastClick.prototype.needsClick = function(target) {
'use strict';
var nodeName = target.nodeName.toLowerCase();

if (nodeName === 'button' || nodeName === 'input') {

    // File inputs need real clicks on iOS 6 due to a browser bug (issue #68)
    // Don't send a synthetic click to disabled inputs (issue #62)
    if ((this.deviceIsIOS && target.type === 'file') || target.disabled) {
        return true;
    }       
} else if (nodeName === 'label' || nodeName === 'video') {
    return true;
}

return ((/\bneedsclick\b/).test(target.className) || (new RegExp(this.defaultElCls).test(target.className)));

};

然后传递pac-item给 FastClick 构造函数

new FastClick(document.body, "pac-item");

希望 FastClick 库也能解决这个问题:)