根据 Google Autocomplete Places API 文档,getPlace()
调用应返回包含所有位置数据的 Places 对象,或者,如果该地点不存在(即 - 用户忽略了建议),它应该返回一个只填充了 Places 对象的名称元素的 stub 。但是,它只在用户按下 ENTER 时执行后一个操作,如果他们 TAB 离开该字段则不会。
我已经尝试查看更改事件、keyup
、keydown
事件。我已经尝试在模糊等情况下使用 keycode
13 触发 keydown
事件,等等。似乎没有任何效果。
有人解决过这个问题吗?很明显,用户会通过 tab 键浏览表单,而且他们总是有可能忽略这些建议。
最佳答案
pac-input
作为您的位置搜索输入,您可以执行以下操作:
// Trigger search on blur
document.getElementById('pac-input').onblur = function () {
google.maps.event.trigger(this, 'focus', {});
google.maps.event.trigger(this, 'keydown', {
keyCode: 13
});
};
或者使用谷歌地图事件监听器:
// Trigger search on blur
google.maps.event.addDomListener(document.getElementById("pac-input"), 'blur', function() {
google.maps.event.trigger(this, 'focus', {});
google.maps.event.trigger(this, 'keydown', {
keyCode: 13
});
});
编辑:如评论中所述,这会扰乱用户通过鼠标点击选择地点的“正常行为”。
下面是一个使用纯 Javascript 的完整示例。对于(更简单的)jQuery 解决方案,请查看 @ChrisSnyder's answer .
function initialize() {
var ac = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')), {
types: ['geocode']
});
ac.addListener('place_changed', function() {
var place = ac.getPlace();
if (!place.geometry) {
// User entered the name of a Place that was not suggested and
// pressed the Enter key, or the Place Details request failed.
console.log("No details available for input: '" + place.name + "'");
return;
}
console.log("You selected: '" + place.formatted_address + "'");
});
// Trigger search on blur
google.maps.event.addDomListener(document.getElementById("autocomplete"), 'blur', function() {
// Find the pac-container element
var pacContainer = nextByClass(this, 'pac-container');
// Check if we are hovering on one of the pac-items
// :hover propagates to parent element so we only need to check it on the pac-container
// We trigger the focus and keydown only if :hover is false otherwise it will interfere with a place selection via mouse click
if (pacContainer.matches(':hover') === false) {
google.maps.event.trigger(this, 'focus', {});
google.maps.event.trigger(this, 'keydown', {
keyCode: 13
});
}
});
}
function hasClass(elem, cls) {
var str = " " + elem.className + " ";
var testCls = " " + cls + " ";
return (str.indexOf(testCls) != -1);
}
function nextByClass(node, cls) {
while (node = node.nextSibling) {
if (hasClass(node, cls)) {
return node;
}
}
return null;
}
#autocomplete {
width: 300px;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initialize&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" async defer></script>
<input id="autocomplete" placeholder="Enter your address" type="text"></input>
关于javascript - Google Autocomplete Places API 不会通过 TAB 触发更改事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28058833/