Javascript 如何清除绑定到 Google Places Autocomplete 的输入？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14384004/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to clear the input bound to the Google Places Autocomplete?
提问by Tristan
Here is my issue: I am using Google Places Autocomplete to gather information about places from the user.
这是我的问题：我正在使用 Google Places Autocomplete 从用户那里收集有关地点的信息。
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.
在事件“place_changed”中，我保存了此信息。但是我想让用户可以添加多个地方。所以在这个地方被保存后我想清除输入。
However Google Autocomplete automatically replace the last entry in the input field. Anyway to get rid of that?
但是 Google 自动完成会自动替换输入字段中的最后一个条目。无论如何要摆脱它？
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
有什么办法解决这个问题吗？我还没有在 Google 文档中找到一个函数，例如
autocomplete.clear();
Thanks!
谢谢！
采纳答案by Dr.Molle
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);
回答by Shu
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.
之前的自动完成对象应该被垃圾收集。如果我错了，请纠正我。为确保暴露内存泄漏，您可以手动删除它。
回答by grogro
to clear place you can use :
清除您可以使用的地方：
autocomplete.set('place',null);
it triggers place_change event too.
它也会触发 place_change 事件。
回答by Mattijs
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.
$this 是对自动完成字段的 jQ 引用。当您在自动完成列表中键入值和选项卡并按 Enter 键时，将触发模糊事件。当您用鼠标单击某处时，模糊事件将触发并清除该字段。
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.
在输入后清除字段似乎是一种荒谬的黑客行为，但我花了 4 个小时在网上搜索并查看 google 的 api，但找不到更好的解决方案。
回答by Mattijs
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:
作为对 Dr.Molle 出色答案的轻微改进，您可以使用 z-index 属性来解决 Flash 问题，至少在最近的浏览器中是这样：
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);
回答by Dave Jellison
For a better internet...
为了更好的互联网...
Simply trigger the blur, invoking Google Places to do its business. Then, perform your logic.
只需触发模糊，调用 Google Places 即可开展业务。然后，执行您的逻辑。
inputId_div.trigger('blur');
If the flashing of the Google value is a problem try chaining your next action, if possible.
如果 Google 值的闪烁有问题，请尽可能尝试链接您的下一个操作。
回答by Marcelo
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.
我不确定你为什么使用inputId_div[0]. 我想它一定是一个jQuery的东西。
