28

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 everything works fine and I choose a suggestion to use out of the autocomplete list - if I deploy it on my mobile I still get suggestions but I'm not able to tap one. It seems the "suggestion-overlay" is just ignored and I can tap on the page. Is there a possibility to put focus on the list of suggestions or something that way ? Hope someone can help me. Thanks in advance.

1
  • No one with a solution? Z-index on the pac-container or pac-item is not working sadly.
    – Mike Äfer
    Apr 4, 2012 at 10:48

6 Answers 6

53

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');
4
  • 2
    This solution uses a deprecated feature; furthermore, it may cause performance problems.
    – Stephen
    Jun 30, 2014 at 21:23
  • 3
    This doesn't work for me. I put that on my code, I see that the class needsclick was added to all objects, but the problem remain. Nothing happens when I tap Jul 8, 2014 at 18:56
  • Thanks for saving my day. Worked perfectly. Sep 9, 2016 at 6:35
  • Geezz... I LOVE YOU! Apr 4, 2018 at 2:58
9

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-'
});
1
  • 1
    This is the best answer so far, I dont know why it is not getting much rating.... Dec 7, 2015 at 4:58
6

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
         });
    });
}
2
  • +1! Z-index solutions did not work for me. FastClick was the culprit in my case. Much appreciated! I have linked to this comment from my original question stackoverflow.com/a/17162343/1177832 for any others with this problem.
    – danwild
    Jun 18, 2013 at 6:58
  • 1
    @saravanan Do you have non jquery solution?
    – EmptyData
    Feb 14, 2015 at 18:28
6

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

2
  • 1
    Thank you so much i fixed like this $(document).on({ 'DOMNodeInserted': function() { $('.pac-item, .pac-item span', this).addClass('no-fastclick'); } }, '.pac-container');
    – Albert
    Jul 20, 2016 at 5:45
  • You deserve a tons of like. :) Feb 5, 2017 at 20:55
1

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

1
  • Adam, can you explain better how your solution works? Jul 8, 2014 at 18:58
0

worked perfectly for me :

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

Configuration: Cordova / iOS iphone 5

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.