Come cancellare l'input associato al completamento automatico di Google Places?

Question

Ecco il mio problema: sto utilizzando il completamento automatico di Google Places per raccogliere informazioni sui luoghi da parte dell'utente.

Nell'evento "place_changed", ho salvato questa informazione. Comunque voglio dare all'utente la possibilità di aggiungere più posti. Quindi, dopo che questo posto è stato salvato, voglio cancellare l'input.

Tuttavia, il completamento automatico di Google sostituisce automaticamente l'ultima voce nel campo di immissione. Ad ogni modo per sbarazzartene?

I dettagli:

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

Voi mi direte, così che sembra bene, basta chiaro nel timeout. MA quando clicco via dall'input (perde la messa a fuoco). L'ultima voce ritorna di nuovo!

Qualche idea per sistemarlo? Non ho trovato nella documentazione di Google una funzione come

autocomplete.clear(); 

Grazie!

Answer 1

Sembra che il completamento automatico ascolta internamente per la sfocatura evento dell'ingresso, così lascia dare qualcosa da ascoltare e cancellare il campo dopo che:

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

Answer 2

Prova:

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

o

inputId_div.value = ''; 

io non sono sicuro perché si sta utilizzando inputId_div[0]. Immagino che debba essere una cosa jQuery.

Answer 3

Non sono sicuro se questo problema è ancora in giro ma ho trovato una correzione che ha funzionato per me

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

    //[DO YOUR CODE HERE] 

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

$ questo è un riferimento JQ al campo di completamento automatico. L'evento di sfocatura si innesca quando si digita il valore e la scheda nell'elenco di completamento automatico e si preme invio. Quando fai clic da qualche parte con il mouse, l'evento di sfocatura si innesca e cancella il campo.

Se si utilizza il mouse direttamente dopo aver digitato per selezionare il risultato, la sfocatura non viene attivata. Quindi il timeout rimuoverà il valore dal tuo campo.

Sembra un ridicolo ridicolo per cancellare il campo dopo l'input ma ho trascorso 4 ore a cercare in rete e cercando l'API di google e non sono riuscito a trovare una soluzione migliore.

Answer 4

come un lieve miglioramento a risposta eccellente del Dr.Molle è possibile utilizzare la proprietà z-index per aggirare il flash, almeno negli ultimi browser:

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 5

Il termine precedente persiste nell'oggetto completamento automatico.

Soluzione: deselezionare la casella di immissione, quindi creare un nuovo oggetto di completamento automatico. Assicurati anche di rimuovere precedenti ascoltatori di eventi.

Dichiarazione:

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

Per cancellare:

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

Scopo completamento automatico precedente occorre garbage collection. Per favore correggimi se sbaglio. Per essere sicuro che stai esponendo perdite di memoria, puoi eliminarlo manualmente.

Answer 6

Per un internet più ...

semplicemente innescare la sfocatura, invocando Google Places per fare il suo business. Quindi, esegui la tua logica.

inputId_div.trigger('blur'); 

Se il lampeggiamento del valore di Google è un problema, provare a concatenare l'azione successiva, se possibile.

Answer 7

per cancellare posto è possibile utilizzare:

autocomplete.set('place',null); 

innesca evento place_change troppo.