8

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

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

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

问题：

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

我们使用的技术资料：

  • jQuery 1.7.1
  • 推特引导程序 2.3.2

在 Windows mobile 中进行测试 - 屏幕截图

4

2 回答 2

4

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

问题 #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 和 Engineer -什么 javascript 将模拟从 google maps 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);
于 2014-12-22T01:57:52.497 回答
0

我试图用 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()
        }
      );
    }
  });
});

它只适用于角色的第二次输入，但至少它适用于这次。

于 2014-03-06T14:43:36.237 回答