7

As title suggests I am building a mobile website with JQuery Mobile (1.3.0) and am trying to implement Google Places Autocomplete (API v3) to aid user input of location data.

The autocomplete functions correctly on desktop device, but not when used on a mobile device (I have only tested on iOS 6).

When used on mobile device the dropdown list of relevant locations do appear, but simply disappear when you press one without loading the selection on the map.

I have looked around and seen some solutions that sight the z-index of

.pac-container

as the culprit (see: http://osdir.com/ml/google-maps-js-api-v3/2012-01/msg00823.html).

I have implemented these fixes but to no avail, and I am not convinced that z-index is the problem because I can see that the selected item does change to it's :hover state/colour when pressed on mobile.

Please if anyone has suggestions I am all ears, need any more details let me know.

4

5 に答える 5

11

サラバナンの答えは少しやり過ぎです。FastClick と PAC との競合を修正するには、needsclickクラスをpac-itemとそのすべての子の両方に追加します。

$(document).on({
    'DOMNodeInserted': function() {
        $('.pac-item, .pac-item span', this).addClass('needsclick');
    }
}, '.pac-container');
于 2013-11-18T19:53:52.827 に答える
4

ありがとうダニエル。しかし、私が提供したソリューションには、パフォーマンスへの影響があります。

それを実現するために、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ライブラリによっても処理されることを願っています:)

于 2013-06-18T18:36:19.280 に答える
1

Google プレイスのオートコンプリートでうまく動作するようにする fastclick のパッチがあります。この回答を参照してください:)

于 2015-05-07T16:49:11.690 に答える
0

何度も髪を引っ張った後、プロジェクトに追加した「FastClick」ライブラリに問題があることがわかりました。

@Saravanan Shanmugam がこのコメントで指摘しているようにhttps://stackoverflow.com/a/16932543/1177832

FastClick はオートコンプリートを妨げているようです。2つをうまくプレイさせるために彼が追加した回避策については、上記のリンクも参照してください。

于 2013-06-18T06:54:11.177 に答える