Google Places Autocomplete 插件在 Firefox android 中不起作用答案

【问题标题】：Google Places Autocomplete plugin isnt working in Firefox androidGoogle Places Autocomplete 插件在 Firefox android 中不起作用
【发布时间】：2015-05-24 08:38:09
【问题描述】：

我们在我们的网站上使用 google 的 places-autocomplete 插件。

最近我们收到了一些来自网站访问者的投诉，称此插件无法在 Android 版本的 Firefox 中运行。不过，它在桌面版 Firefox 中运行良好。

问题可以简单观察

转到地点自动完成示例here
尝试在“输入位置”搜索输入中输入邮政编码

您将观察到以下 2 个问题 -

当您开始输入邮政编码。但直到有人在 5 位邮政编码后键入 space 或 , 时才会这样做。
当出现建议时（在输入 space 或 , 之后），您无法选择第一个建议。当您点击它时，光标会移回搜索输入。但是，您可以正确选择第二个或第三个建议。

问题 #2 对用户来说非常烦人和令人沮丧。我们已经收到了几起关于此问题的投诉。

我已经在运行 Android 4.4.2 的三星 S4 上的 Firefox 版本 36.0.2 上确认了这一点。

如何解决？

【问题讨论】：

有人可以确认一下吗？我确信谷歌的汽车位置 api 被广泛使用。对于解决方法的任何意见或建议，我将不胜感激。谢谢！
有人可以建议一种调试方法吗？类似于 Chrome 的设备仿真工具.. 是否有与 Firefox 等效的东西 - 所以我可以看到在 Android 仿真模式下抛出了哪些错误消息。我尝试在 Firefox 中使用“用户代理切换器”扩展，但这并没有让我走得太远。将感谢您的投入！谢谢。
不，我怀疑是否有任何合理的方法可以做到这一点，因为他们的代码是多么的精简和复杂。目前正在调查诸如“在用户键入每个字符后，插入一个空格并立即删除它”之类的黑客攻击。但我没有屏住呼吸
不，它没有帮助。但是第二个问题可以通过为第一个元素添加边距来解决。它丑陋但至少它的功能。 .FirefoxAndroid .pac-container .pac-item:first-child { margin-top: 20px; }
对不起，我忘记了 JS。它只有几行，基本上检查“firefox”和“android”的用户代理。它可能并不完美，但它解决的问题多于它造成的问题。 <script> var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1; var is_android = navigator.userAgent.toLowerCase().indexOf('android') > -1; if(is_firefox && is_android){ $('html').addClass('FirefoxAndroid'); } </script>

标签： android firefox autocomplete google-places-api

【解决方案1】：

第二个问题的解决方法是为第一个自动完成建议提供上边距，以便用户可以点击它。它不漂亮，但很实用。

css

.FirefoxAndroid .pac-container .pac-item:first-child { 
    margin-top: 20px;
}

<script> 
    var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;     
    var is_android = navigator.userAgent.toLowerCase().indexOf('android') > -1; 

    if(is_firefox && is_android){ 
        $('html').addClass('FirefoxAndroid');
    }
</script>

【讨论】：

【解决方案2】：

我今天遇到了同样的问题 - 我正在开发的网站在每个网络浏览器上都能完美运行，除了 FF 移动版之外，自动完成功能也是如此。

在尝试了 3-4 种解决方案后，对我有用的是在我的代码顶部声明 var place。

我有类似的东西

var autocomplete;
var place;
var input = document.getElementById('location');
var options = {
    componentRestrictions: {'country':'be'},
    types: ['(regions)'] // (cities)
};

autocomplete = new google.maps.places.Autocomplete(input,options);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
    place = autocomplete.getPlace();
    ...
}

它不仅仅适用于 FF mobile，因为我没有在顶部声明 place。

也许它会帮助将来知道的人

【讨论】：