Google将自动填充功能置于Windows Mobile IE浏览器中不起作用 [英] Google places autocomplete not working in Windows mobile IE Browser

问题描述

我们正在为我们的产品）

需要 jquery.simulate.js

  //在Windows Phone 8.1中修复自动完成选择。 
 window.setInterval（function（）{
 //解决了已弃用财产的解决方法。
 $ .browser = {msie：（/msie|trident/i).test(navigator .userAgent）}; 
 $ items = $（'。pac-container .pac-item'）。not（'。tracking'）; 
 $ items.addClass（'tracking'）; // 
 $ items.mousedown（function（e）{
 //获取文本选定项目
 var $ item = $（this）; 
 var $ query = $ item.find（'。pac-item-query'）; 
 var text = $ query.text（）+'，'+ $ query.next（）。text（）; 
 $ // 
 setTimeout（function（）{
 //检查Autocomplete是否按预期工作，如果是则退出
 if（$ address.val （）== text）{console.log（'exit'）; return} 
 $ address.trigger（focus）; 
 //按住键直到被选中的项被选中。 $ b var interval = setInterval（f unction（）{
 $ address.simulate（keydown，{keyCode：40}）; 
 //如果选择的项目不是那个点击的项目，则继续; 
 var $ query = $（'。pac-container .pac-item-selected .pac-item-query：first'）; 
 if（text！= $ query.text（）+'，'+ $ query.next（）。text（））return; 
 //找到点击的项目，选择它并完成; 
 $ address.simulate（keydown，{keyCode：13}）; 
 $ address.blur（）; 
 clearInterval（interval）; 
}，1）
}，1）
}）; 
}，500）; 
  

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:

1. 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.
2. 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

解决方案

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

这篇关于Google将自动填充功能置于Windows Mobile IE浏览器中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！