Google将自动填充功能置于Windows Mobile IE浏览器中不起作用
我们正在为我们的产品骑行建立一个移动网站。
我们在我们的网站上广泛使用Google地方自动完成功能。 这用于在用户输入时向用户提供建议。
我们在多个浏览器和设备上测试了这一点。 这在Android设备和IOS中工作正常。 但是，在Windows Mobile（操作系统版本8，IE浏览器）上，自动完成/自动填充列表几乎不可用
问题：
技术的东西我们使用：
找到解决这两个问题的解决方法。
问题＃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的解决方法 （感谢里尔和工程师 - 什么JavaScript将模拟谷歌地图api 3地方自动完成下拉选择？）
需要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);
我试图用jQuery做一些调整。 这是一个临时解决方案，希望Google能够解决这个问题。
我在初始化自动填充文本字段后添加了以下代码：
<input type="text" id="maps-autocomplete" placeholder="I'm staying at..." autocomplete="off" />
加载时：
$(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()
}
);
}
});
});
它只适用于角色的第二个输入，但至少现在可以使用。
链接地址: http://www.djcxy.com/p/73681.html上一篇: Google places autocomplete not working in Windows mobile IE Browser