How to format Google Places auto-fill text in a text box

I use Google autocomplete in a text box and, as a matter of fact, work, select places and type them into text boxes.

The problem is that I only want to fill in the selection name, not the full name + address formatting from the list that is created by the autocomplete list. I can't seem to find a way to override what is in the text box.

    var $name = $("#txtName");
    $name.focus();

    var autocomplete = new google.maps.places.Autocomplete($name[0]);
    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        var place = autocomplete.getPlace();

        // explicitly update model
        // but doesn't display in UI
        $scope.locationData.Name = place.name;


        // explicitly update the input box - doesn't update UI
        $name.val(place.name);

        return false;  // doesn't work - updates UI
    });

Basically, what I would like to do is take on the text assignment of the input itself, by performing the assignment itself and causing the autocomplete not to set the value of the text field.

Is it possible?

+3
source share
1 answer

Set the value with a slight delay.

$('#NameBox').on('blur change', function () { $(this).val(place.name).off('blur change'); });
setTimeout(function () { $('#NameBox').val(place.name); }, 150);

.off() , . API-, .off().

+1

All Articles