can't tap on item in google autocomplete list on mobile

Question

I\'m making a mobile-app using Phonegap and HTML. Now I\'m using the google maps/places autocomplete feature. The problem is: if I run it in my browser on my computer everyt

Answer 1

if you are using Framework 7, it has a custom implementation of FastClicks. Instead of the needsclick class, F7 has no-fastclick. The function below is how it is implemented in 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;
 }

So as suggested in other comments, you will only have to add the .no-fastclick class to .pac-item and in all its children

Answer 2

worked perfectly for me :

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

Configuration: Cordova / iOS iphone 5

Answer 3

There is indeed a conflict with FastClick and PAC. I found that I needed to add the needsclick class to both the pac-item and all its children.

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

Answer 4

I was having the same problem, I realized what the problem was that probably the focusout event of pac-container happens before the tap event of the pac-item (only in phonegap built-in browser).

The only way I could solve this, is to add padding-bottom to the input when it is focused and change the top attribute of the pac-container, so that the pac-container resides within the borders of the input.

Therefore when user clicks on item in list the focusout event is not fired.

It's dirty, but it works

Answer 5

This reply may be too late. But might be helpful for others.

I had the same issue and after debugging for hours, I found out this issue was because of adding "FastClick" library. After removing this, it worked as usual.

So for having fastClick and google suggestions, I have added this code in 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 6

There is currently a pull request on github, but this hasn't been merged yet.

However, you can simply use this patched version of fastclick.

The patch adds the excludeNode option which let's you exclude DOM nodes handled by fastclick via regex. This is how I used it to make google autocomplete work with fastclick:

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