更改谷歌地图自动完成文本框中的值答案

【问题标题】：Change the value in textbox of a google map autocomplete更改谷歌地图自动完成文本框中的值
【发布时间】：2012-12-05 04:32:29
【问题描述】：

我有以下 javascript 代码，它在作为地址一部分的不同输入文本框上执行谷歌地图自动完成。

function startAutoComplete() {
    var address = document.getElementById("addressId");
    var city = document.getElementById("cityId");
    var state = document.getElementById("stateId");
    var zip = document.getElementById("zipId");

    //option for autocomplete
    var option = {types: ['geocode'], componentRestrictions: {country: 'us'}};

    //autocomplete for address textbox
    autocomplete = new google.maps.places.Autocomplete(address, option);

    google.maps.event.addListener(autocomplete, 'place_changed', function() {
        var place = autocomplete.getPlace();

        //parses the result object and populates the other textboxes accordingly
        for(i=0; i<place.address_components.length; i++)
        {
            if(place.address_components[i].types[0] == 'locality')
            city.value = place.address_components[i].long_name;

            if(place.address_components[i].types[0] == 'administrative_area_level_1')
            state.value = place.address_components[i].short_name;

            if(place.address_components[i].types[0] == 'postal_code')
            zip.value = place.address_components[i].long_name;
        }

        /* Here is the PROBLEM */
        address.value = place.name;

    });

但是，当我尝试使用完整地址的缩短版本（所以这里只有街道号码和街道名称）更新正在自动完成的文本框时。完整地址文本框中的值不会改变。我尝试使用 jquery 并在文本框中使用 setAttribute() 设置 value 属性。我做错了什么？

【问题讨论】：

您能否显示您的选项对象，即您用于初始化自动完成的对象？ autocomplete = new google.maps.places.Autocomplete(address, option);
show just the street address in google.maps.event.addListener() 的可能重复项
添加了用于自动完成的选项变量。

标签： javascript google-maps-api-3 autocomplete

【解决方案1】：

我发现以编程方式更改自动完成输入值的最简单方法是重新初始化输入字段。

autocomplete = new google.maps.places.Autocomplete(address, option);

google.maps.event.addListener(autocomplete, 'place_changed', function() {
   // populate your other text fields
   ...
   // change the value of your autocomplete
   address.value = place.name;
   // reinitialize with new input value
   autocomplete = new google.maps.places.Autocomplete(address, option);
}

【讨论】：

【解决方案2】：

Autocomplete 对象有一些不明显的事件监听器。现实情况是，当您运行代码时，它确实会更改值，然后自动完成对象会很快将其更改回来！要对此进行测试，请在您的 address.value = place.name; 行之后添加 alert();。如果您添加一个 setTimeout() 以 1 毫秒的延迟设置值，您可以哄它保持您的价值。但是当您离开该字段时，会触发自动完成的blur 事件，并且您的地址会再次被覆盖。你可以用一行来解决这个问题：

address.addEventListener('blur', function() { address.value = place.name; });

这也处理了第一种情况，因此您甚至不需要添加setTimeout()。用此事件侦听器替换您用于设置值的行，它将替换自动完成的回调函数，该函数在每次触发时设置文本。

【讨论】：

【解决方案3】：

我找到了一个非常临时的解决方案。似乎如果您故意创建一个错误，它将解除与原始文本框的谷歌地图自动完成功能的绑定，并使用更新后的值显示您的原始文本框。不是真正的解决方案，但它是一个开始

//Created this variable that stores the pac-container
var element = document.getElementsByClassName("pac-container");

//inside the addListener() function I added this to create a DOM error
element[0].childNodes[0].childNodes[0].removeChild();

javascript 会引发错误，但它至少允许我使用 '.value' 在文本框中输入我想要的内容

这不是一个解决方案，而是一个开始。我希望我们能找到更好的解决方案。

【讨论】：

【解决方案4】：

如何克隆元素，然后用相同的元素替换，然后再次调用initialze。

嗯，像这样。这在过去对我有用。

$("#Id").replaceWith($("#Id").clone());
initialize();

这里的inittailize是dom加载时调用的方法 google.maps.event.addDomListener(window, 'load', initialize);在您的情况下可能会有所不同

【讨论】：