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

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.

Answer 3

to clear place you can use :

autocomplete.set('place',null);

it triggers place_change event too.

Answer 4

Not sure if this problem is still around but I found a fix that worked for me

google.maps.event.addListener(autoComplete, 'place_changed', function() {   
   $this.one("blur",function(){
      $this.val("");
   });

   //[DO YOUR CODE HERE]

   setTimeout(function(){
      $this.val(""); 
   },10); 
});

$this is a jQ reference to the autocomplete field. The blur event will trigger when you type in your value and tab into the autocomplete list and hit enter. When you click somewhere with the mouse, the blur event will trigger and clear the field.

If you use mouse directly after typing to select result, the blur is not triggered. Then the timeout will remove the value from your field.

It seems like a ridicolous hack to clear the field after input but I spent 4 hours searching the net and looking though the api of google and couldnt find a better solution.

Answer 5

As a slight enhancement to Dr.Molle's excellent answer you can use the z-index property to work around the flash, at least in recent browsers:

var input = $('#[id of autocomplete field]');
$(input).blur();
setTimeout(function() {
    var container = $('.pac-container');
    var zIndex = $(container).css('z-index');
    $(container).css('z-index', -1);
    input.val('')
    input.focus();
    setTimeout(function() {
        $(container).css('z-index', zIndex);
    }, 200);
}, 10);

Answer 6

For a better internet...

Simply trigger the blur, invoking Google Places to do its business. Then, perform your logic.

inputId_div.trigger('blur');

If the flashing of the Google value is a problem try chaining your next action, if possible.

Answer 7

Try:

document.getElementById('myinput').value = '';

or

inputId_div.value = '';

I am not sure why you're using inputId_div[0]. I guess it must be a jQuery thing.