使用 Google Maps JavaScript API(通过 <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();
}
}
});
使用字段值以编程方式触发下拉列表的正确方法是什么?
最佳答案
我想我知道你想要完成什么。您希望保留文本字段的状态,以便在重新获得焦点时,它可以恢复到您原来的位置。这样的事情对你有用吗?
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">
关于javascript - 首次使用后如何触发 Google Places 自动完成结果下拉列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50615069/