使用Google Maps API地址自动填充功能，无需单独的字段

Question

我想将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. */
}

这有效......但只有在场地集中时才有效。一旦它失去焦点 - 就像当你选择到下一个字段时 - 它会再次重新显示完整的地址。

我无法找到任何事件或任何可以防止该字段在失去焦点时重新显示完整地址的内容。自动填充类只有一个事件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事件上的自动填充字段，我会用街道地址填充它，然后它“坚持”并且不会恢复到完整地址（即使我插入和退出）：

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