How to clear the input bound to the Google Places Autocomplete?

Question

Here is my issue: I am using Google Places Autocomplete to gather information about places from the user.

On the event "place_changed", I save this information. However I want to give the user the possibility to add multiple places. So after this place has been save I want to clear the input.

However Google Autocomplete automatically replace the last entry in the input field. Anyway to get rid of that?

The details :

var inputDiv = $('#myinput');
var options = {
  types: ['(cities)']
};
var autocomplete = new google.maps.places.Autocomplete(inputDiv[0], options);

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

    console.log(inputDiv.val()); // 'Paris, France'
    inputDiv.val('');
    console.log(inputDiv.val()); // (an empty string)

    setTimeout(function() {
        console.log(inputDiv.val()); // 'Paris, France' (It's back!)
        inputDiv.val('');
        console.log(inputDiv.val()); // (an empty string)      
    }, 1);

    setTimeout(function() {
        console.log(inputDiv.val()); // (an empty string)      
    }, 10);
}

You will tell me, well that looks fine, just clear it in the timeout. BUT when I click away from the input (it loses the focus). The last entry comes back again!

Any idea to fix that? I haven't found in the Google documentation a function such as

autocomplete.clear();

Thanks!

Answer 1

It appears that the autocomplete internally listens to the blur-event of the input, so lets give it something to listen for and clear the field after that:

inputId_div.blur();     setTimeout(function(){  inputId_div.val('')  inputId_div.focus();},10); 

Answer 2

to clear place you can use :

autocomplete.set('place',null); 

it triggers place_change event too.

Answer 3

The previous term persists in the autocomplete object.

Solution: Clear the input box then create a new autocomplete object. Also be sure to remove previous event listeners.

Declaration:

var input = document.getElementById('autocomplete');
var autocomplete;
var autocompleteListener;
var onPlaceChange = function() {...};

var initAutocomplete = function() {
  autocomplete = new google.maps.places.Autocomplete(input);
  autocompleteListener = google.maps.event.addListener(autocomplete, 'place_changed', onPlaceChange);
};

To clear:

input.value = "";
google.maps.event.removeListener(autocompleteListener);
initAutocomplete();

The previous autocomplete object should be garbage collected. Please correct me if I'm wrong. To be sure you are exposing memory leaks, you can manually delete it.