Google Places Autocomplete - Pick first result on Enter？
我使用的是Google Places自动完成功能，我只是想让它在表单字段中按enter键时选择结果列表中的顶部项目，并且存在建议。我知道以前有人问过这个问题：
Google maps Places API V3 autocomplete - select first option on enter
Google maps Places API V3 autocomplete - select first option on enter (and have it stay that way)
但这些问题中的答案似乎并不实际有效，或者它们解决了特定的附加功能。
它看起来也像下面这样的东西应该可以工作(但它不是)：
$("input#autocomplete").keydown(function(e) {
if (e.which == 13) {
//if there are suggestions...
if ($(".pac-container .pac-item").length) {
//click on the first item in the list or simulate a down arrow key event
//it does get this far, but I can't find a way to actually select the item
$(".pac-container .pac-item:first").click();
} else {
//there are no suggestions
}
}
});如有任何建议，我们将不胜感激！
回答 9
Stack Overflow用户
发布于 2016-05-11 22:48:19
我已经阅读了这个问题的许多答案，以及链接问题的答案很多次，最后发现最好的答案是this one (注意:遗憾的是，这不是公认的答案！)
我已经修改了两三行，使其成为一个现成的函数，您可以将其复制/粘贴到代码中，如果需要，还可以应用于许多input元素。这就是它：
var selectFirstOnEnter = function(input) { // store the original event binding function
var _addEventListener = (input.addEventListener) ? input.addEventListener : input.attachEvent;
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]); // add the modified listener
}
if (input.addEventListener) {
input.addEventListener = addEventListenerWrapper;
} else if (input.attachEvent) {
input.attachEvent = addEventListenerWrapper;
}
}用法：
selectFirstOnEnter(input1);
selectFirstOnEnter(input2);
...Stack Overflow用户
发布于 2014-01-14 05:31:01
我正在从Google maps Places API V3 autocomplete - select first option on enter转发我的答案
似乎有一个更好、更干净的解决方案:用google.maps.places.SearchBox代替google.maps.places.Autocomplete。代码几乎是一样的，只是从多个地方得到第一个。一按Enter键，就会返回正确的列表--这样它就会在开箱即用，不需要修改。
请参阅示例HTML页面：
http://rawgithub.com/klokan/8408394/raw/5ab795fb36c67ad73c215269f61c7648633ae53e/places-enter-first-item.html
相关的代码片段是：
var searchBox = new google.maps.places.SearchBox(document.getElementById('searchinput'));
google.maps.event.addListener(searchBox, 'places_changed', function() {
var place = searchBox.getPlaces()[0];
if (!place.geometry) return;
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(16);
}
});该示例的完整源代码位于：https://gist.github.com/klokan/8408394
Stack Overflow用户
发布于 2017-07-19 22:04:31
如果用户已经开始使用键盘向下导航，而不是每次都触发错误导航，则侦听工作解决方案
https://codepen.io/callam/pen/RgzxZB
以下是重要的部分
// search input
const searchInput = document.getElementById('js-search-input');
// Google Maps autocomplete
const autocomplete = new google.maps.places.Autocomplete(searchInput);
// Has user pressed the down key to navigate autocomplete options?
let hasDownBeenPressed = false;
// Listener outside to stop nested loop returning odd results
searchInput.addEventListener('keydown', (e) => {
if (e.keyCode === 40) {
hasDownBeenPressed = true;
}
});
// GoogleMaps API custom eventlistener method
google.maps.event.addDomListener(searchInput, 'keydown', (e) => {
// Maps API e.stopPropagation();
e.cancelBubble = true;
// If enter key, or tab key
if (e.keyCode === 13 || e.keyCode === 9) {
// If user isn't navigating using arrows and this hasn't ran yet
if (!hasDownBeenPressed && !e.hasRanOnce) {
google.maps.event.trigger(e.target, 'keydown', {
keyCode: 40,
hasRanOnce: true,
});
}
}
});
// Clear the input on focus, reset hasDownBeenPressed
searchInput.addEventListener('focus', () => {
hasDownBeenPressed = false;
searchInput.value = '';
});
// place_changed GoogleMaps listener when we do submit
google.maps.event.addListener(autocomplete, 'place_changed', function() {
// Get the place info from the autocomplete Api
const place = autocomplete.getPlace();
//If we can find the place lets go to it
if (typeof place.address_components !== 'undefined') {
// reset hasDownBeenPressed in case they don't unfocus
hasDownBeenPressed = false;
}
});https://stackoverflow.com/questions/14601655
复制相似问题
腾讯云开发者
