Change the value in textbox of a google map autocomplete

Question

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;

    });

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?

Answer 1

The simplest way I've found to programmatically change the value of an Autocomplete input is to reinitialize the input field.

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

Answer 2

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('blur', function() { address.value = place.name; });

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.