Javascript Maps API自动完成建议不会替换输入值

我有一个使用谷歌地图API自动完成的输入字段。我想将该输入的数据保存到databaseFirebase。但问题是，在选择自动完成结果并提交表单后，它会显示在选择自动完成之前保存键入内容的值

例：

我选择纽约市。。。在键入“新建”后从“自动完成” 即使输入字段显示纽约市，它提交的内容也只是新的

出于演示目的，我将其连接到一个谷歌地图iframe:Full代码，可在此处找到：

你好，伙计

调用代码时，searchInput.value似乎仍然没有更新

尝试在执行代码之前设置一个超时-请参阅forked codepen

因此，您可以这样解决问题：

searchInput.addEventListener("change", () => {
    // Wrap in setTimeout, so you give time searchInput.value to be updated
    setTimeout(function() {
        let addr = searchInput.value;
        console.log(addr)
        let embed = "<iframe frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='https://maps.google.com/maps?&amp;q=" + encodeURIComponent(addr) + "&amp;output=embed'></iframe>";

        $('.place').html(embed);
    }, 100); 
});

结论

---

google.maps.places.Autocomplete更新

places Autocomplete API提供获取所选地址的方法之前存在延迟，

searchInput.addEventListener("change", () => {
    // Wrap in setTimeout, so you give time searchInput.value to be updated
    setTimeout(function() {
        let addr = searchInput.value;
        console.log(addr)
        let embed = "<iframe frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='https://maps.google.com/maps?&amp;q=" + encodeURIComponent(addr) + "&amp;output=embed'></iframe>";

        $('.place').html(embed);
    }, 100); 
});