如何在页面首次加载时自动选择自动完成的地点建议？

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 了解有关确保正确触发下拉菜单的更多信息，请注意有关将参数传递给触发函数的部分。