Google places autocomplete not working in IE mobile browser for Windows browser

Question

We are creating a mobile site for our ridingo product.

We use the google places auto-fill feature on our website. This is used to provide suggestions to users as they are entered.

We tested this on several browsers and devices. This works great on Android and iOS devices. But on Windows Mobile (OS version 8, IE browser) the autocomplete / autopopulation list is almost not applicable

Problems:

• We cannot touch the desired item in the autopopulation list. When you touch this, it automatically closes the list (the behavior is similar to what we see when we press the "ESC" button or click in another place in the window). Because of this, we cannot select any list item.
• The list is displayed in a slightly lower place than the text box. This problem may be in the screenshot.

Technical material We use:

• jQuery 1.7.1
• twitter bootstrap 2.3.2

Answer 1

Workarounds have been found for both issues.

Workaround for problem number 2

JS (add this right after the autocomplete initialization code):

// Fix autocomplete position in Windows Phone 8.1. Also see CSS rules. // Wait until the autocomplete element is added to the document. var fixEutocompleteInterval = window.setInterval(function(){ var $container = $('body > .pac-container'); if ($container.length == 0) return; // Move the autocomplete element just below the input. $container.appendTo($('#address').parent()); // The fix is finished, stop working. window.clearInterval(fixEutocompleteInterval); }, 500); 

CSS

 // Fixes Google Maps Autocomplete position. Also see the JS code. #address_container { position: relative; } .pac-container { position: absolute !important; top: 34px !important; left: 1px !important; } 

Workaround for problem # 1 (thanks to Lill and Engineer - which javascript will simulate the choice of google maps api 3 places in the autocomplete drop-down list? )

requires jquery.simulate.js

 // Fix autocomplete selection in Windows Phone 8.1. window.setInterval(function(){ // A workaround for missing property that was deprecated. $.browser = {msie: (/msie|trident/i).test(navigator.userAgent)}; $items = $('.pac-container .pac-item').not('.tracking'); $items.addClass('tracking'); // Add event listener once only. $items.mousedown(function(e){ // Get the text selected item. var $item = $(this); var $query = $item.find('.pac-item-query'); var text = $query.text() + ', ' + $query.next().text(); // Let this event to finish before we continue tricking. setTimeout(function(){ // Check if Autocomplete works as expected and exit if so. if ($address.val() == text) { console.log('exit'); return } $address.trigger("focus"); // Press key down until the clicked item is selected. var interval = setInterval(function(){ $address.simulate("keydown", { keyCode: 40 }); // If selected item is not that clicked one then continue; var $query = $('.pac-container .pac-item-selected .pac-item-query:first '); if (text != $query.text() + ', ' + $query.next().text()) return; // Found the clicked item, choice it and finish; $address.simulate("keydown", { keyCode: 13 }); $address.blur(); clearInterval(interval); }, 1) }, 1) }); }, 500); 

Answer 2

I tried to adjust a bit using jquery. This is a temporary solution, I hope Google can solve this problem.

Ive added the following code after initializing an autocomplete text field:

 <input type="text" id="maps-autocomplete" placeholder="I'm staying at..." autocomplete="off" /> 

And at boot time:

 $(function() { var autocomplete = new google.maps.places.Autocomplete((document.getElementById('maps-autocomplete'))); $('#maps-autocomplete').keyup(function(e) { var container = $('.pac-container').first(); if (container.offset().top > $(this).offset().top + $(this).outerHeight()) { container.offset( { top: $(this).offset().top + $(this).outerHeight() } ); } }); }); 

It only works in the second character input, but at least it works for that time.