在谷歌地图自动完成的文本框更改值 [英] Change the value in textbox of a google map autocomplete

问题描述

我有以下的javascript code这确实不同的输入文本框是一个地址的部分谷歌地图自动完成。

I have the following javascript code which does google map autocomplete on different input textboxes that are parts of an address.

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的文本框中的值属性（）尝试。我在做什么错了？

However when I try and update the textbox that is being auto completed with a shortened version of the full address (so here just the street number and street name). The value in the full address textbox doesn't change. I've tried using jquery and setting the value attribute with setAttribute() on the textbox. What am I doing wrong?

推荐答案

自动完成的对象有几个不明显事件侦听器。现实情况是，当你运行你code，它实际上改变的值，然后自动完成对象的更改回真快！为了验证这一点，添加警报（）; 后您的 address.value = place.name; 行。如果添加您可以将其哄骗到保持你的价值的setTimeout（），设置了1ms的延迟值。但是，当你离开领域，自动完成的模糊事件触发，你的地址再次覆盖。你可以解决这个问题有一行：

The Autocomplete object has a few not obvious event listeners. The reality is that when you run your code, it actually does change the value, and then the Autocomplete objects changes it back really fast! To test this, add alert(); after your address.value = place.name; line. You can cajole it to keeping your value if you add a setTimeout() that sets the value with a 1ms delay. But when you leave the field, the Autocomplete's blur event triggers, and your address is overwritten again. You can solve this issue with one line:

address.addEventListener（'模糊'，函数（）{address.value = place.name;}）;

这需要照顾的第一例一样，所以你甚至不需要添加的setTimeout（）。更换你有与此事件监听器设定值就行了，它将取代每次被炒鱿鱼时设置文本自动完成的回调函数。

This takes care of the first case as well, so you won't even need to add a setTimeout(). Replace the line you have for setting the value with this event listener, and it will replace the Autocomplete's callback function that sets the text every time it gets fired.

这篇关于在谷歌地图自动完成的文本框更改值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！