Google places autocomplete not working in Windows mobile IE Browser

Question

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 user

Answer 1

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);