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

I've tried to do a little tweak with jquery. It is a temporary solution, hopefully google will manage to solve this bug.

Ive added following code after initializing my autocomplete text field:

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

And when loading:

$(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 on the second enter of a character, but at least it works for this time.

Answer 2

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