使用没有单独字段的 Google Maps API 地址自动完成功能答案

【问题标题】：Use Google Maps API address autocomplete feature without separate field使用没有单独字段的 Google Maps API 地址自动完成功能
【发布时间】：2015-08-26 08:41:09
【问题描述】：

我想将 Google Maps JavaScript API 的 Address Autocomplete 功能添加到我的表单中。我关注了他们的example page，到目前为止一切正常。

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

默认情况下，选择自动完成建议时，它附加的字段填写完整地址（例如，例如123 Main St., Anytown, CA, United States）。但由于我将自动完成行为附加到我的街道地址字段，我只希望它在选择建议后显示数字和街道名称。所以我尝试将自动完成字段的值设置为 JSON 响应中的 street_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 类只有一个事件，place_changed，仅在选择自动完成建议时触发。

所以我尝试了adding a DOM listener 用于字段上的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."
});

但即使日志语句显示该字段的值在模糊时设置为123 Main St.，它仍会在浏览器中显示完整的123 Main St., Anytown, CA, United States。

有什么方法可以实现我想要做的事情，还是我只需要添加一个单独的自动完成字段？

【问题讨论】：

标签： javascript google-maps google-maps-api-3 autocomplete onblur

【解决方案1】：

解决了！事实证明，如果我只是手动模糊 place_changed 事件上的自动完成字段之前我用街道地址填写它，然后它“粘住”并且不会恢复为完整地址（即使我进出它）：

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

更新：我原来的解决方案适用于 Safari 和 Chrome，但不适用于 IE。为了让 IE 也能正常工作，我发现我只需要将我的 fillInAddress() 函数包装在一个超时中：

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

我不确定这有什么不同——尤其是因为其他浏览器没有它也可以——但是通过将值设置为 0，它不会导致任何明显的延迟。

【讨论】：