internet-explorer - 谷歌放置自动完成在 Windows 移动 IE 浏览器中不起作用

Question

我们正在为我们的产品建立一个移动网站 ridingo .

我们在我们的网站上广泛使用谷歌地点自动完成功能。
这用于在用户键入时向用户提供建议。

我们在多个浏览器和设备上对此进行了测试。
这在 Android 设备和 IOS 中运行良好。
但是，在 Windows mobile(操作系统版本 8，IE 浏览器)上，自动完成/自动填充列表几乎无法使用

问题:

我们无法触摸自动填充列表中的所需项目。触摸它时，它会自动关闭列表(行为类似于我们按“ESC”按钮或单击窗口上的其他位置时所看到的行为)。因此，我们无法选择任何列表项。

列表呈现在比文本框稍低的位置。这个问题也可能出现在屏幕截图上。

我们使用的技术 Material :

jQuery 1.7.1

推特 bootstrap 2.3.2

Answer 1

找到了解决这两个问题的方法。

问题 #2 的解决方法

JS(在自动完成初始化代码之后添加):

// 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;
}

问题 #1 的解决方法 (感谢里尔和工程师 - what javascript will simulate selection from the google maps api 3 places autocomplete dropdown?)

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