Google自动填充方法API不会通过TAB触发更改事件

根据Google Autocomplete Places API文档，getPlace（）调用应返回包含所有位置数据的Places对象，或者，如果该位置不存在（即 – 用户忽略了建议），则应返回一个存根填充Places对象的name元素。但是，它仅在用户按Enter时执行后一操作，而不是在TAB超出字段时执行。

我已经尝试过查看更改事件，keyup，keydown事件。 我已经尝试使用键码13触发关于模糊等的keydown事件。似乎没有什么工作。

有没有人克服过这个问题？ 很明显，用户会在表单中进行制表，并且总是有可能忽略这些建议。

Answer 1

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的答案 。

 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; } 

Answer 2

以下内容扩展了@ MrUpsidown的解决方案，但是当他们点击@ Jkk.jonah所提到的下拉列表中的项目时，试图避免弄乱用户

 // 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 }); } }); 

Answer 3

显然发生了一些变化，上面的代码在最后几天没有工作，并且控制台中出现了以下exception

  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 });