Не может использовать элемент в списке автозаполнения google на мобильном устройстве

Я делаю мобильное приложение с помощью Phonegap и HTML. Теперь я использую функцию автозаполнения карт google maps/places. Проблема в том, что если я запустил ее в своем браузере на своем компьютере, все будет хорошо, и я выберу предложение использовать из списка автозаполнения - если я разверну его на своем мобильном телефоне, у меня все еще есть предложения, но я не могу нажать один, Кажется, что "предложение-оверлей" просто игнорируется, и я могу нажать на странице. Есть ли возможность сосредоточиться на списке предложений или что-то в этом роде? Надеюсь, кто-нибудь может мне помочь. Спасибо заранее.

Ответ 1

Существует действительно конфликт с FastClick и PAC. Я обнаружил, что мне нужно добавить класс needclick для pac-item и всех его дочерних элементов.

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

Ответ 2

В настоящее время на github существует запрос на перенос, но пока он еще не объединен.

Однако вы можете просто использовать эту исправленную версию fastclick.

Патч добавляет параметр excludeNode, который позволяет исключать узлы DOM, обрабатываемые fastclick через регулярное выражение. Вот как я использовал его, чтобы сделать автозаполнение google с помощью fastclick:

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

Ответ 3

Этот ответ может быть слишком запоздалым. Но может быть полезно для других.

У меня была такая же проблема, и после отладки в течение нескольких часов я узнал, что эта проблема связана с добавлением библиотеки FastClick. После этого он работал как обычно.

Итак, для предложений fastClick и google я добавил этот код в geo autocomplete

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

Ответ 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 и во всех его дочерних

Ответ 5

У меня была та же проблема, Я понял, в чем проблема: возможно, событие focusout pac-container происходит перед событием tap pac-item (только в встроенном браузере со встроенным телефоном).

Единственный способ, которым я мог это решить, заключается в том, чтобы добавить padding-bottom к вводу, когда он сфокусирован, и изменить верхний атрибут pac-контейнера, так что pac-контейнер находится внутри границ ввода.

Поэтому, когда пользователь нажимает на элемент в списке, событие фокуса не запускается.

Он грязный, но он работает

Ответ 6

отлично работал у меня:

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

Конфигурация: Cordova/iOS iphone 5