如何清除綁定到Google Places自動填充的輸入？

以下是我的問題：我正在使用Google商家信息自動填充來收集用戶有關地點的信息。如何清除綁定到Google Places自動填充的輸入？

在事件「place_changed」上，我保存了這些信息。不過，我想給用戶添加多個位置的可能性。所以在這個地方保存後，我想清除輸入。

但Google自動完成會自動替換輸入字段中的最後一個條目。無論如何擺脫這一點？

細節：

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

你會告訴我，很好，看起來不錯，只是清除它在超時。但是當我點擊輸入（它失去了焦點）。最後一個條目又回來了！

任何想法解決這個問題？我還沒有在谷歌文檔中找到一個函數，如

autocomplete.clear();

謝謝！

來源

2013-01-17 Tristan

看來，自動完成內部監聽輸入的模糊事件，所以讓我們給它的東西，聽取並清除現場後認爲：

如果

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

來源

2013-01-18 01:42:45

好吧，它確實有效！雖然它相當黑客=）唯一的問題是它在幾分之一毫秒內「閃爍」自動完成下拉菜單。 – Tristan

是的，我見過。但我發現的唯一的其他選擇是用新輸入替換輸入並創建一個新的自動完成，我擔心這會造成內存泄漏。您可以嘗試將輸入的可見性設置爲在開始處「隱藏」，並在結尾處將輸入設置爲「可見」。 –

雖然你不能專注於隱藏的輸入。 – Tristan

-2

嘗試：

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

或

inputId_div.value = '';

我不知道爲什麼你使用inputId_div[0]。我想它一定是一個jQuery的東西。

來源

2013-01-17 17:00:18 Marcelo

沒有，沒有區別=（ – Tristan

是的，我使用inputId_div [0]只是因爲我更喜歡一般使用jQuery – Tristan

@Tristan，但是什麼是指向輸入字段的變量？inputId_div [0]會建議inputId_div （我從來沒有使用過jQuery） – Marcelo

不知道這個問題仍然存在但我發現了一個修復工作對我來說

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

    //[DO YOUR CODE HERE] 

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

$這是對自動填充字段的jQ引用。當您將值和標籤鍵入自動完成列表中並點擊輸入時，模糊事件將觸發。當您用鼠標點擊某處時，模糊事件將觸發並清除該字段。

如果您在打字後直接使用鼠標來選擇結果，則不會觸發模糊。然後，超時將從您的字段中刪除該值。

這似乎是一個荒謬的黑客清除輸入字段後，但我花了4個小時搜索網絡，看雖然谷歌的API，並不能找到一個更好的解決方案。

來源

2013-04-23 13:34:56 Mattijs

由於輕微的增強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);

來源

2013-08-25 01:29:35

此前長期堅持的自動完成對象。

解決方案：清除輸入框，然後創建一個新的自動填充對象。另外一定要刪除以前的事件監聽器。

聲明：

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

以前的自動完成對象應在垃圾收集。如果我錯了，請糾正我。爲了確保你暴露內存泄漏，你可以手動刪除它。

來源

2013-11-14 23:28:43 Shu

IMO這是解決問題的正確方法，謝謝！ –

爲了更好的互聯網......

只需觸發模糊，調用谷歌的地方做業務。然後，執行你的邏輯。

inputId_div.trigger('blur');

如果閃爍的Google值是一個問題，嘗試鏈接您的下一個動作，如果可能的話。

來源

2015-01-04 06:21:26

http://stackoverflow.com/questions/25692666/how-to-stop-address-from-populating-autocomplete-with-google-places –

明確的地方，你可以使用：

autocomplete.set('place',null);

它會觸發place_change事件了。

來源

2016-07-06 10:17:27 grogro

如何清除綁定到Google Places自動填充的輸入？

回答

相關問題