Question

我正在使用Google地图自动填充服务，当我开始在此服务附带的输入框中输入时，我会在下拉列表中给出预测。

但是，在我的应用程序中，我首先在与自动填充输入框所在页面不同的页面上获取用户输入。因此，当用户进入自动填充搜索框所在的页面时，我希望用户看到已经用我在另一页上收集的输入文本填写的输入搜索框，更重要的是还在下拉列表中显示预测，以便用户只需选择正确的那个。

我能够显示框中填写的输入，但无法显示预测下拉。

我看到谷歌地图有预测方法，我可以存储在数组中。我试图从数组项目中搜索如何创建下拉DOM元素，但我找不到合适的答案。

我尝试的下一件事是以编程方式模拟输入框中的点击，因为当我手动点击输入框时，它会随着预测而下降。我无法做到这一点。

请帮我弄清楚如何才能做到最好。

以下是HTML，它与js文件中的Google自动完成代码相关联。

HTML

    <div class="input-group search-box">
      <input id="pac-input" class="form-control controls" type="text"
      value="{{ selectedText }}" placeholder="Find a location">
    </div>

Answer 1

今年早些时候，我遇到了类似的问题。您需要获取选择输入的第一项。这里有用的答案，关于如何在按下输入时抓住它（模拟向下箭头按下）：Google maps Places API V3 autocomplete - select first option on enter。

具体来说，请看第二个答案。这里有一些最有用的代码，但你必须稍微修改一下。删除关于模拟输入按钮（下面的13）的位，并在设置值后改为在页面加载时发生。

    function addEventListenerWrapper(type, listener) {
        // Simulate a 'down arrow' keypress on hitting 'return' when no pac suggestion is selected,
        // and then trigger the original listener.
        if (type == "keydown") {
            var orig_listener = listener;
            listener = function(event) {
                var suggestion_selected = $(".pac-item-selected").length > 0;
                if (event.which == 13 && !suggestion_selected) {
                    var simulated_downarrow = $.Event("keydown", {
                        keyCode: 40,
                        which: 40
                    });
                    orig_listener.apply(input, [simulated_downarrow]);
                }

                orig_listener.apply(input, [event]);
            };
        }

        _addEventListener.apply(input, [type, listener]);
    }

更简单的方法可能是在页面加载后模拟keyup事件，然后触发自动完成places_changed。这将是jQuery：

$('#pac-input').val('My Passed City');
$('#pac-input').keyup(function() {
    // Can use this to pass over, or select manually 
    var firstResult = $(".pac-container .pac-item:first").text();
    // Fire the selection event
    google.maps.event.trigger(autocomplete, 'place_changed');
});
$('#pac-input').keyup();

有关确保正确触发下拉列表的更多信息，请参阅this answer，请注意有关将参数传递给触发器函数的信息。

如何在首次加载页面时显示自动填充位置建议

1 个答案: