如何在首次使用后触发 Google 地点自动完成结果下拉列表？

Question

使用Google地图JavaScriptAPI（通过<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places&callback=initAutocomplete" async defer></script>），我的地址输入...

...在我键入“1251”时显示自动完成信息...

... 并在我单击地址（或按回车键）时将完整地址添加到输入中：

目前，如果我再次点击地址输入（在添加地址之后），它只会将焦点添加到输入中，没有别的：

我的问题是：单击已自动完成的输入时，如何使用输入的数据再次触发下拉菜单？

点击删除一次（只需将结尾从 USA 更改为 US）重新打开下拉列表，但我不希望用户必须更改条目才能看到下拉列表.这是我尝试过的：

$('.geoloc input').on({

    // neither 'place_changed' nor 'focus' trigger the dropdown (doesn't work)
    click: function(){
        google.maps.event.trigger(this, 'place_changed');
        // or
        google.maps.event.trigger(this, 'focus', {});
    },

    // enter selects first address from dropdown (works)
    keydown: function(e){
        if (e.keyCode == 13) {
            google.maps.event.trigger(this, 'keydown', {keyCode:40});
            google.maps.event.trigger(this, 'keydown', {keyCode:13});
            this.blur();
        }
    }
});

使用字段值以编程方式触发下拉列表的正确方法是什么？

Answer 1

我想我知道你想要完成什么。您希望保留文本字段的状态，以便在重新获得焦点时，它可以恢复到您原来的位置。这样的东西对你有用吗？

var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);

input.addEventListener('input', function () {
  this.dataset.originalVal = this.value;
});
input.addEventListener('focus', function () {
  this.value = input.dataset.originalVal ? input.dataset.originalVal : this.value;
});

input {
  width: 300px;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<input id="searchTextField" type="text">

Answer 2

接受的答案不适合我，但另一个答案适合：Need to manually start the google places autocomplete

TL;DR，延迟后调用输入的.focus()。

如何在首次使用后触发 Google 地点自动完成结果下拉列表？

How to trigger Google Places Autocomplete results dropdown after first use?

javascript

jquery

google-maps

google-places-api

googleplacesautocomplete