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

Question

Я создаю мобильное приложение, используя Phonegap и HTML.Сейчас я использую функцию автозаполнения карт / мест Google.Проблема: если я запускаю его в своем браузере на моем компьютере, все работает нормально, и я выбираю предложение для использования из списка автозаполнения - если я разверну его на своем мобильном телефоне, я все равно получаю предложения, но я не могу нажать на них,Кажется, что «наложение предложений» просто игнорируется, и я могу нажать на страницу.Есть ли возможность сфокусироваться на списке предложений или что-то в этом роде?Надеюсь, кто-нибудь может мне помочь.Заранее спасибо.

Answer 1

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

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

Answer 2

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

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

Патч добавляет опцию excludeNode, которая позволяет исключать DOM-узлы, обрабатываемые fastclick через regex. Вот как я использовал его, чтобы заставить автозаполнение Google работать с fastclick:

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

Answer 3

, если вы используете 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 4

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

У меня была такая же проблема, и после нескольких часов отладки я обнаружил, что эта проблема была из-за добавления библиотеки "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
         });
    });
}

Answer 5

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

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

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

Это грязно, но работает

Answer 6

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

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

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