Menu icon Foundation
Autocomplete Geocomplete doens't work on mobile

Hi,

I have tried for hours to fix an simpel integration of geocomplete (http://ubilabs.github.io/geocomplete/) into the foundation framework.

Everything is working great, but on mobile devices like an iPhone the autocomplete is not working when select an item in the autocomplete dropdown.

Changing the loading sequence of the JS files means that the autocomplete is working on mobile. But than the top bar doesn't work.

An example http://test.campagneserver.nl/index2/?locale=en_GB#

This field gives the problem:

Thanks for your help, Paul

Example code:

<script type="text/javascript" src="/foundation/js/modernizr.js"></script> 
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script src="/geo/jquery.geocomplete.js"></script> 
<script type="text/javascript" src="/foundation/js/jquery.js"></script> 
<script type="text/javascript" src="/foundation/js/foundation.min.js"></script> 

<script type="text/javascript"> 

var j = jQuery.noConflict( true ); 
$(function(){ 
$("#geocomplete2").geocomplete({ details: "form" }); 

$("#find").click(function(){ 
$("#geocomplete2").trigger("geocode"); }); 
}); 

j(function(){ j(document).foundation(); }); </script> 

            

         

The autocomplete expand on mobile devices like iPhone but select an record doesn't work.

Foundation 5jquerygeocomplete

Hi,

I have tried for hours to fix an simpel integration of geocomplete (http://ubilabs.github.io/geocomplete/) into the foundation framework.

Everything is working great, but on mobile devices like an iPhone the autocomplete is not working when select an item in the autocomplete dropdown.

Changing the loading sequence of the JS files means that the autocomplete is working on mobile. But than the top bar doesn't work.

An example http://test.campagneserver.nl/index2/?locale=en_GB#

This field gives the problem:

Thanks for your help, Paul

Example code:

<script type="text/javascript" src="/foundation/js/modernizr.js"></script> 
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script src="/geo/jquery.geocomplete.js"></script> 
<script type="text/javascript" src="/foundation/js/jquery.js"></script> 
<script type="text/javascript" src="/foundation/js/foundation.min.js"></script> 

<script type="text/javascript"> 

var j = jQuery.noConflict( true ); 
$(function(){ 
$("#geocomplete2").geocomplete({ details: "form" }); 

$("#find").click(function(){ 
$("#geocomplete2").trigger("geocode"); }); 
}); 

j(function(){ j(document).foundation(); }); </script> 

            

         

The autocomplete expand on mobile devices like iPhone but select an record doesn't work.

Paul about 6 years ago

No one knows how to solve this problem?

Problem is that on smartphone devices it is not possible to select an autocomplete record in de UL.

On desktop it is working great even if i resize browser screen to smartphone device. I read different persons with same problems with jquery / jquery ui autocomplete.

Brandon Arnold about 6 years ago

Is this specific to this plugin and Foundation or just this plugin on Mobile? You may have better luck on the plugin site, for something plugin specific.

Paul about 6 years ago

@Brandson combination with Foundation and the JQUERY and Geocomplete plugin.

Without calls to Foundation jquery and foundation.min.js gecomplete and jquery UI autocomplete working perfect.

But with foundation active it isn't possible to select an item in de autocomplete dropdown.

And changing the load sequence means that the plugins are working but the Foundation menu not.

Paul about 6 years ago

Additional:

It looks like an conflict with Foundation and Jquery Autocomplete when using an touchscreen.

Paul almost 6 years ago

I have still the problem.

I searched on Google en more people have problems ( only on mobile ) with the Jquery autocomplete. It is not possible to select an item in the < select >

Changing the way the libraries are loaded fix the problem with the autocomplete, but than the menu-icon can activated the offcanvas menu.

Paul almost 6 years ago

Okay more information:

Only on touchscreen devices the autocomplete doesn't work. The autocomplete is working and give options to choose. Bu choosing an option isn't possible.

On normal desktop with small browser window and selecting option with an mouse there isn't any problem.

So when I remove the problem is solved.

Try it on http://test.campagneserver.nl/index2/ the 2 input fields are autocompletes. Working great on desktop but not on touchscreens like iPhone and iPads.

henry wu over 5 years ago

Btw - i fixed this problem by removing fastclick.js from my includes.

Fastclick.js interferes with autocomplete on touch UI's.

Roberto over 3 years ago

Same problem, removing fastclick help me to fix it too.