使用 Google 地图 API 地址自动完成功能，无需单独的字段

Question

我想添加 Address Autocomplete feature of the Google Maps JavaScript API to my form. I followed their example page 并且到目前为止一切正常。

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

By default, when an autocomplete suggestion is selected, the field it's attached to fills in with the full address (e.g. 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. */
}

这行得通...但只有在该字段被聚焦时才有效。一旦它失去焦点 - 比如当您跳转到下一个字段时 - 它会再次重新显示完整地址。

我找不到任何事件或任何我可以用来防止该字段在失去焦点时重新显示完整地址的东西。自动完成 class 只有一个事件 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。

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

Answer 1

已解决！事实证明，如果我只是在 place_changed 事件 之前手动模糊自动完成字段 我用街道地址填充它，那么它 "sticks" 并且不会' t 恢复到完整地址（即使我输入和输出它）：

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，它不会导致任何可察觉的延迟。

使用 Google 地图 API 地址自动完成功能，无需单独的字段

Use Google Maps API address autocomplete feature without separate field

javascript

google-maps

autocomplete

onblur

google-maps-api-3