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 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:

We are unable to touch the desired item on the autopopulate list. When touching it, it automatically closes the list (behavior similar to what we'd see when we press "ESC" button or click somewhere else on the window). Because of this, we cannot get any list item selected.
The list gets rendered at a slightly lower place than the text box. This problem can be screen on the screenshot too.

Tech stuff We use :

jQuery 1.7.1
twitter bootstrap 2.3.2

Testing in Windows mobile - Screenshot

And have you found a solution for the bug concerning the on click event that isn't triggered? — ReBa, Mar 06 '14 at 16:12
In my case I am not able to get the drop-down list of places. What could be the issue? — S_S, Mar 02 '16 at 06:47

score 4 · Answer 1 · edited May 23 '17 at 12:00

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

The fixes for the selection of the place from the dropdown does not work for a Windows Phone Cordova app. Is there a better solution? Also, the dropdown appears at the top of the page, can we change the position from the CSS using a relative aspect? — S_S, Mar 03 '16 at 11:46
I'm not familiar with Cordova. CSS overrides work in browsers. You can try this yourself in your Cordova app, it probably should not be too hard to do. Don't forget to use the "!important" flag if needed. — raacer, Mar 04 '16 at 14:04
I tried, but the solution to #1 does not work, the list still disappears when an item is selected. For #2, the drop down appears at the top of the web page, I want it to appear below the input box. Any help would be welcome! — S_S, Mar 06 '16 at 07:10

score 0 · Answer 2 · answered Mar 06 '14 at 14:43

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.

Google places autocomplete not working in Windows mobile IE Browser

2 Answers2

Linked