internet explorer - Google places autocomplete not working in Windows mobile IE Browser -

we building mobile site our product ridingo.

we use google places autocomplete feature extensively on our site. used provide suggestions users type.

we tested across multiple browsers , on devices. working fine in android devices , ios. but, on windows mobile (os version 8, ie browser), autocomplete/autopopulate list unusable

problems:

1. we unable touch desired item on autopopulate list. when touching it, automatically closes list (behavior similar we'd see when press "esc" button or click somewhere else on window). because of this, cannot list item selected.
2. the list gets rendered @ lower place text box. problem can screen on screenshot too.

tech stuff use :

• jquery 1.7.1
• twitter bootstrap 2.3.2

found workarounds both problems.

workaround problem #2

js (add after autocomplete initialization code):

// fix autocomplete position in windows phone 8.1. see css rules. // wait until autocomplete element added document. var fixeutocompleteinterval = window.setinterval(function(){     var $container = $('body > .pac-container');     if ($container.length == 0) return;     // move autocomplete element below input.     $container.appendto($('#address').parent());     // fix finished, stop working.     window.clearinterval(fixeutocompleteinterval); }, 500); 

css:

// fixes google maps autocomplete position. see js code. #address_container {     position: relative; } .pac-container {     position: absolute !important;     top: 34px !important;     left: 1px !important; } 

workaround problem #1 (thanks lille , engineer - what javascript simulate selection google maps api 3 places autocomplete dropdown? )

requires jquery.simulate.js

// fix autocomplete selection in windows phone 8.1. window.setinterval(function(){     // workaround missing property 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){         // text selected item.         var $item = $(this);         var $query = $item.find('.pac-item-query');         var text = $query.text() + ', ' + $query.next().text();         // let event finish before continue tricking.         settimeout(function(){             // check if autocomplete works expected , exit if so.             if ($address.val() == text) { console.log('exit'); return }             $address.trigger("focus");             // press key down until clicked item selected.             var interval = setinterval(function(){                 $address.simulate("keydown", { keycode: 40 });                 // if selected item not clicked 1 continue;                 var $query = $('.pac-container .pac-item-selected .pac-item-query:first ');                 if (text != $query.text() + ', ' + $query.next().text()) return;                 // found clicked item, choice , finish;                 $address.simulate("keydown", { keycode: 13 });                 $address.blur();                 clearinterval(interval);             }, 1)         }, 1)     }); }, 500);