Javascript Google Autocomplete Places API未通过选项卡触发更改事件

根据Google Autocomplete Places API文档，调用

getPlace（）

应该返回一个包含所有位置数据的Places对象，或者，如果该位置不存在（即用户忽略了建议），它应该返回一个存根，只填充Places对象的name元素。但是，它仅在用户点击ENTER键时执行后一种操作，而不是在用户将选项卡移出字段时执行

我试过查看更改事件，

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 maps事件侦听器：

// 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解决方案，请参阅

函数初始化（）{
var ac=new google.maps.places.Autocomplete(
（document.getElementById（'autocomplete'））{
类型：['geocode']
});
ac.addListener（'place_changed'，function（）{
var place=ac.getPlace（）；
如果（！place.geometry）{
//用户输入了未建议的地点的名称，然后
//按Enter键，或Place Details请求失败。
log（“没有可供输入的详细信息：“+place.name+””）；
返回；
}
log（“您选择：”+place.formatted_address+”）；
});
//触发模糊搜索
google.maps.event.addDomListener（document.getElementById（“自动完成”），“blur”，function（）{
//查找pac容器元素
var pacContainer=nextByClass（这个“pac容器”）；
//检查我们是否在其中一个pac项目上悬停
//：hover会传播到父元素，因此我们只需要在pac容器上检查它
//只有当：hover为false时，我们才会触发焦点和keydown，否则它将通过鼠标单击干扰位置选择
if（pacContainer.matches（':hover'）==false）{
google.maps.event.trigger（这个'focus'，{}）；
google.maps.event.trigger（这是“keydown”{
密码：13
});
}
});
}
函数类（elem、cls）{
var str=“”+elem.className+”；
var testCls=“”+cls+”；
返回（str.indexOf（testCls）！=-1）；
}
函数nextByClass（节点，cls）{
while（node=node.nextSibling）{
if（类（节点，cls））{
返回节点；
}
}
返回null；
}

#自动完成{
宽度：300px；
}

---

以下内容对@MrUpsidown的解决方案进行了扩展，但试图避免在用户单击下拉列表中的某个项目时给用户带来麻烦

//触发模糊搜索
google.maps.event.addDomListener（document.getElementById（“pac输入”），“blur”，function（）{
if（jQuery（'.pac项：hover'）。长度==0）{
google.maps.event.trigger（这个'focus'，{}）；
google.maps.event.trigger（这是“keydown”{
密码：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
});

---

您应该始终发布您的代码或尝试编写代码。谢谢@MrUpsideDown。很抱歉没有发布代码，当时我的计算机上没有。后一种选择效果更好。尝试了addListener，但忘记了addDomListener。再次感谢！请注意，这会让用户点击下拉列表中的某个项目时出错。到目前为止，关于这个问题的所有威胁中我都有最好的答案。我已经处理这个问题好几个星期了，根本没有找到一个完美的解决方案，而这似乎非常有效！的确，这里的解决方案很好。很好。我已经修改了我的答案。非常感谢。