Question

我们正在为我们的产品ridingo构建移动网站。

我们在网站上广泛使用Google地方自动填充功能。这用于在用户输入时向他们提供建议。

我们在多个浏览器和设备上对此进行了测试。这在Android设备和IOS中运行良好。但是，在Windows Mobile（OS Version 8，IE浏览器）上，自动完成/自动填充列表几乎无法使用

问题：

我们无法触摸自动人口列表中的所需项目。触摸它时，它会自动关闭列表（行为类似于我们按“ESC”按钮时所看到的行为或点击窗口上的其他位置）。因此，我们无法选择任何列表项。
列表的呈现位置略低于文本框。此问题也可以在屏幕截图上进行筛选。

技术资料我们使用：

jQuery 1.7.1
twitter bootstrap 2.3.2

Testing in Windows mobile - Screenshot

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的解决方法（感谢Lille和工程师 - 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);

Answer 2

我试过用jquery做一点调整。这是一个临时解决方案，希望谷歌能够设法解决这个问题。

我在初始化自动填充文字字段后添加了以下代码：

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

它仅适用于角色的第二次输入，但至少它适用于此时。

Google将自动填充功能置于Windows移动IE浏览器中

2 个答案: