如何在页面首次加载时自动 select 自动完成位置建议？

Question

我正在使用 Google 地图自动完成服务，当我开始在附加到该服务的输入框中输入时，它会在下拉菜单中给出预测。

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

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

我看到 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

今年早些时候我遇到了类似的问题。您需要获取 select 输入的第一项。这里有用的答案，关于如何在按下回车键时抓住它（模拟按下箭头键）：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，注意有关将参数传递给触发函数的部分。

如何在页面首次加载时自动 select 自动完成位置建议？

How to automatically select autocomplete place suggestions when the page first loads?

google-maps

google-maps-api-3

google-places-api