Как очистить ввод, связанный с автозаполнением Google Адресов?

Вот моя проблема: я использую автозаполнение Google Places для сбора информации о местах от пользователя.

В событии "place_changed" я сохраняю эту информацию. Однако я хочу дать пользователю возможность добавить несколько мест. Поэтому после того, как это место было сохранено, я хочу очистить вход.

Однако Google Autocomplete автоматически заменяет последнюю запись в поле ввода. В любом случае, чтобы избавиться от этого?

Подробности:

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 back!)
        inputDiv.val('');
        console.log(inputDiv.val()); // (an empty string)      
    }, 1);

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

Вы скажете мне, что это хорошо, просто очистите его в тайм-аут. НО, когда я нажимаю на вход (он теряет фокус). Последняя запись возвращается снова!

Любая идея исправить это? Я не нашел в документации Google такую функцию, как

autocomplete.clear();

Спасибо!

Ответы

Ответ 1

Похоже, что автозаполнение внутренне прослушивает размытие события, поэтому давайте ему что-то прослушать и очистить поле после этого:

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

Ответ 2

Предыдущий термин сохраняется в объекте автозаполнения.

Решение. Очистите поле ввода, а затем создайте новый объект автозаполнения. Также не забудьте удалить предыдущие прослушиватели событий.

Декларация:

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

Чтобы очистить:

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

Предыдущий объект автозаполнения должен быть собран в мусор. Пожалуйста, поправьте меня, если я ошибаюсь. Чтобы убедиться, что вы подвергаете утечку памяти, вы можете вручную удалить ее.

Ответ 3

Не уверен, что эта проблема все еще вокруг, но я нашел исправление, которое сработало для меня

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

   //[DO YOUR CODE HERE]

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

$это jQ-ссылка на поле автозаполнения. Событие размытия будет срабатывать, когда вы введете свое значение и вкладку в список автозаполнения и нажмите enter. Когда вы нажимаете где-то с помощью мыши, событие размытия запускает и очищает поле.

Если вы используете мышь непосредственно после ввода для выбора результата, размытие не запускается. Затем таймаут удалит значение из вашего поля.

Кажется, что смешно взламывает поле после ввода, но я потратил 4 часа на поиск в сети и выглядел, хотя api google и не смог найти лучшего решения.

Ответ 4

чтобы очистить место, которое вы можете использовать:

autocomplete.set('place',null);

он также запускает событие place_change.

Ответ 5

В качестве небольшого улучшения для превосходного ответа Dr.Molle вы можете использовать свойство z-index для работы со вспышкой, по крайней мере в последних браузерах:

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

Ответ 6

Для лучшего интернета...

Просто вызвать размытие, вызывая Google Places делать свой бизнес. Затем выполните свою логику.

inputId_div.trigger('blur');

Если проблесковость значения Google является проблемой, попробуйте связать свое следующее действие, если это возможно.

Ответ 7

Try:

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

или

inputId_div.value = '';

Я не уверен, почему вы используете inputId_div[0]. Я предполагаю, что это должна быть вещь jQuery.