Google 自动完成地点 API 未通过 TAB 触发更改事件
Google Autocomplete Places API not triggering event on change via TAB
根据 Google Autocomplete Places API 文档,getPlace()
调用应该 return 一个包含所有位置数据的 Places 对象,或者,如果那个地方没有t 存在(即 - 用户忽略了建议),它应该 return 一个仅填充了 Places 对象的名称元素的存根。但是,它仅在用户按下 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
});
};
或者使用 google 地图事件侦听器:
// 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 解决方案,请查看 .
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>
以下扩展了@MrUpsidown 的解决方案,但试图避免在用户单击下拉列表中的项目时混淆用户
// Trigger search on blur
google.maps.event.addDomListener(document.getElementById("pac-input"), 'blur', function() {
if (jQuery('.pac-item:hover').length === 0 ) {
google.maps.event.trigger(this, 'focus', {});
google.maps.event.trigger(this, 'keydown', {
keyCode: 13
});
}
});
显然发生了一些变化,上面的代码最近几天不工作,控制台中出现以下异常
undefined is not an object (evaluating 'a.handled=!0')
您需要在焦点事件的触发器上添加一个空对象
var inputSearch = document.getElementById('pac-input');
google.maps.event.trigger(inputSearch, 'focus', {})
google.maps.event.trigger(inputSearch, 'keydown', {
keyCode: 13
});
根据 Google Autocomplete Places API 文档,getPlace()
调用应该 return 一个包含所有位置数据的 Places 对象,或者,如果那个地方没有t 存在(即 - 用户忽略了建议),它应该 return 一个仅填充了 Places 对象的名称元素的存根。但是,它仅在用户按下 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
});
};
或者使用 google 地图事件侦听器:
// 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 解决方案,请查看
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>
以下扩展了@MrUpsidown 的解决方案,但试图避免在用户单击下拉列表中的项目时混淆用户
// Trigger search on blur
google.maps.event.addDomListener(document.getElementById("pac-input"), 'blur', function() {
if (jQuery('.pac-item:hover').length === 0 ) {
google.maps.event.trigger(this, 'focus', {});
google.maps.event.trigger(this, 'keydown', {
keyCode: 13
});
}
});
显然发生了一些变化,上面的代码最近几天不工作,控制台中出现以下异常
undefined is not an object (evaluating 'a.handled=!0')
您需要在焦点事件的触发器上添加一个空对象
var inputSearch = document.getElementById('pac-input');
google.maps.event.trigger(inputSearch, 'focus', {})
google.maps.event.trigger(inputSearch, 'keydown', {
keyCode: 13
});