javascript - map 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当您调用代码时仍然没有更新。

尝试在执行代码之前设置超时 - 请参阅 forked codepen 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> 的值