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

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

今年早些时候我遇到了一些类似的麻烦。您需要获取选择输入的第一项。这里有用的答案，关于如何在按 Enter 键时获取它（模拟向下箭头键）：Google 地图 Places API V3 自动完成 - 选择 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();

请参阅此答案，了解有关确保正确触发下拉列表的更多信息，请注意有关将参数传递给触发器函数的部分。

Answer 2

另一种解决方法是在未选择任何内容的情况下重新聚焦输入：

autocomplete.addListener('place_changed', async (e) => {
    const place = autocomplete.getPlace();

    if (!place.geometry) {
        jQuery('#autocomplete').trigger('blur');
        requestAnimationFrame(() => {
            jQuery('#autocomplete').trigger('focus');
        });