javascript - Maps API 自动完成建议不会替换输入的值

Question

我有一个使用 Google Maps API 自动完成的输入字段。我想将该输入的数据保存到数据库(Firebase)。但问题是，在选择自动完成结果并提交表单后，它显示了保存我在选择自动完成之前输入的内容

的值

例如:

我在输入“New”后从自动完成中选择“New York City...”即使输入字段显示“纽约市”，它提交的只是"new"

出于演示目的，我将其连接到 Google map iframe:完整代码可在此处找到:http://codepen.io/Auzy/pen/wJyXKR?editors=1111

const searchInput = document.getElementById('searchTextField');
const autocomplete = new google.maps.places.Autocomplete(searchInput);

searchInput.addEventListener("change", () => {
    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);                                         
});
function getInput(){

    var addr = document.getElementById('searchTextField').value;


        var 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);

};

Answer 1

你好_伙计，

好像searchInput.value当您调用您的代码时仍未更新。

尝试在执行代码之前设置一个超时 - 请参阅 fork 代码笔 HERE

所以你可以这样解决你的问题:

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之前有延迟更新 <input> 的值