javascript - palabras - eliminar sugerencias de la barra de direcciones chrome

¿Cómo borrar la entrada vinculada al autocompletado de Google Places?

Question

Aquí está mi problema: estoy utilizando el autocompletado de Google Places para recopilar información sobre los lugares del usuario.

En el evento "place_changed", guardo esta información. Sin embargo, quiero dar al usuario la posibilidad de agregar varios lugares. Así que después de guardar este lugar quiero borrar la entrada.

Sin embargo, Google Autocomplete automáticamente reemplaza la última entrada en el campo de entrada. De todos modos para deshacerse de eso?

Los detalles :

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

Usted me dirá, bueno, eso se ve bien, solo bórrelo en el tiempo de espera. PERO cuando hago clic fuera de la entrada (pierde el foco). La última entrada vuelve de nuevo!

¿Alguna idea para arreglar eso? No he encontrado en la documentación de Google una función como

autocomplete.clear();

¡Gracias!

Answer 1

Como una ligera mejora de la excelente respuesta de Dr.Molle, puede utilizar la propiedad z-index para evitar el flash, al menos en navegadores recientes:

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 2

El término anterior persiste en el objeto autocompletado.

Solución: borre el cuadro de entrada y luego cree un nuevo objeto de autocompletar. También asegúrese de eliminar los oyentes de eventos anteriores.

Declaración:

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

Limpiar:

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

El objeto de autocompletar anterior debe ser recogido basura. Por favor corrígeme si estoy equivocado. Para asegurarse de que está exponiendo pérdidas de memoria, puede eliminarla manualmente.

Answer 3

No estoy seguro de si este problema todavía existe, pero encontré una solución que funcionó para mí

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

   //[DO YOUR CODE HERE]

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

$ esta es una referencia jQ al campo autocompletar. El evento de desenfoque se activará cuando escriba su valor y ficha en la lista de autocompletar y presione Intro. Cuando haces clic en algún lugar con el ratón, el evento de desenfoque se activará y borrará el campo.

Si usa el mouse directamente después de escribir para seleccionar el resultado, el desenfoque no se activa. Luego, el tiempo de espera eliminará el valor de su campo.

Parece un truco ridículo para limpiar el campo después de la entrada, pero pasé 4 horas buscando en la red y buscando en la API de Google y no pude encontrar una mejor solución.

Answer 4

Para despejar el lugar puedes usar:

autocomplete.set(''place'',null);

también activa el evento place_change.

Answer 5

Para una mejor internet ...

Simplemente desencadene el desenfoque, invocando Google Places para hacer su negocio. Luego, ejecuta tu lógica.

inputId_div.trigger(''blur'');

Si el parpadeo del valor de Google es un problema, intente encadenar su próxima acción, si es posible.

Answer 6

Parece que el autocompletado escucha internamente el evento de desenfoque de la entrada, así que le damos algo para escuchar y limpia el campo después de eso:

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

Answer 7

Tratar:

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

o

inputId_div.value = '''';

No estoy seguro de por qué estás usando inputId_div[0] . Supongo que debe ser una cosa jQuery.