We are building a mobile site for our product ridingo.
We use the google places autocomplete feature extensively on our site. This is used to provide suggestions to users as they type.
We tested this across multiple browsers and on devices. This is working fine in Android devices and IOS. But, on Windows mobile (OS Version 8, IE browser), the autocomplete/autopopulate list is almost unusable
Problems:
Tech stuff We use :
The autocomplete widget is a search dialog with built-in autocomplete functionality. As a user enters search terms, the widget presents a list of predicted places to choose from. When the user makes a selection, a Place instance is returned, which your app can then use to get details about the selected place.
To enable the Address Autocomplete Feature, go to the Advanced tab of the Address field. Scroll down till you see the Enable Address Autocomplete option. Toggle on this setting to enable address autocomplete in your form.
The autocomplete request is available at no charge, and the subsequent Place Details call gets charged based on regular Place Details pricing. A Place Details request generates Data SKUs (Basic, Contact, and/or Atmosphere) – depending on the fields that are specified in the request.
Found workarounds for both problems.
Workaround for problem #2
JS (add this just 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 Lille and Engineer - what javascript will simulate selection from the google maps api 3 places autocomplete dropdown? )
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);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With