Javascript 使用谷歌地图API地址自动完成功能，无需单独字段

我想将GoogleMapsJavaScriptAPI的功能添加到我的表单中。我遵循了他们的建议，到目前为止一切正常

但是，我不喜欢该示例仅为自动完成行为使用单独的字段。我想将自动完成行为附加到我现有的街道地址字段，这样我就可以避免在表单中添加额外的字段

默认情况下，当选择自动完成建议时，该建议所附加的字段将填写完整地址（例如，美国加利福尼亚州安尼敦大街123号）。但是，由于我将自动完成行为附加到我的街道地址字段，我只希望在选择建议后，它显示号码和街道名称。因此，我尝试将autocomplete字段的值设置为JSON响应中的

street\u number

和

route

：

if (addressType == "street_number") {
    // Set the value to the street number
    document.getElementById("autocomplete").value = val; /* 123 */
} else if (addressType == "route") {
    // Append the street name
    document.getElementById("autocomplete").value += " " + val; /* 123 Main St. */
}

这是可行的…但只有在关注领域的时候。一旦它失去焦点——比如当你点击下一个字段时——它会再次显示完整地址

我找不到任何事件或任何可以用来阻止字段在失去焦点时重新显示完整地址的内容。Autocomplete类只有一个事件，该事件仅在选择Autocomplete建议时激发

因此，我尝试在字段上设置

blur

事件，以便每当它失去焦点时，我可以将其值设置回街道地址：

google.maps.event.addDomListener(document.getElementById("autocomplete"), "blur", function() {
    document.getElementById("autocomplete").value = streetAddress;
    console.log(document.getElementById("autocomplete").value); /* logs "123 Main St."
});

但即使log语句显示该字段的值在blur上设置为

123 Main St.

，它仍然在浏览器中显示完整的

123 Main St.，Anytown，CA，United States

---

有没有办法实现我想要做的，或者我只需要添加一个单独的自动完成字段？

解决了！事实证明，如果在填写街道地址之前，我只是手动模糊了

place\u changed

事件上的autocomplete字段，那么它会“粘住”，并且不会恢复到完整地址（即使我用tab键进出）：

---

更新：我的原始解决方案在Safari和Chrome中工作，但在IE中不起作用。为了让IE也工作，我发现我只需在超时时间内包装我的

fillInAddress（）

函数：

google.maps.event.addListener(autocomplete, "place_changed", function() {
    document.getElementById("autocomplete").blur();
    window.setTimeout(fillInAddress, 0);
});

我不知道为什么这会有什么不同——特别是因为其他浏览器没有它也可以——但是通过将值设置为

0

，它不会造成任何明显的延迟

google.maps.event.addListener(autocomplete, "place_changed", function() {
    document.getElementById("autocomplete").blur();
    window.setTimeout(fillInAddress, 0);
});