如何清除绑定到 Google Places Autocomplete 的输入？

Question

这是我的问题：我正在使用 Google Places Autocomplete 从用户那里收集有关地点的信息。

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

你会告诉我，看起来不错，只需在超时时清除它。 但是当我点击远离输入时（它失去了焦点）。最后一个条目又回来了！

有办法解决这个问题吗？ 我在 Google 文档中没有找到诸如

之类的功能

autocomplete.clear();

谢谢！

Answer 1

自动完成似乎在内部监听输入的模糊事件，所以让我们给它一些监听并在之后清除字段：

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

Answer 2

清除你可以使用的地方：

autocomplete.set('place',null);

它也会触发 place_change 事件。

Answer 3

前一个术语保留在自动完成对象中。

解决方案：清除输入框，然后创建一个新的自动完成对象。还要确保删除以前的事件侦听器。

声明：

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

之前的自动完成对象应该被垃圾回收。如果我错了，请纠正我。为确保您暴露了内存泄漏，您可以手动删除它。

Answer 4

不确定这个问题是否仍然存在，但我找到了适合我的修复方法

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

   //[DO YOUR CODE HERE]

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

$this 是对自动完成字段的 jQ 引用。 当您在自动完成列表中输入值和选项卡并按 Enter 时，将触发模糊事件。 当您用鼠标单击某处时，会触发模糊事件并清除该字段。

如果在输入后直接使用鼠标选择结果，则不会触发模糊。然后超时将从您的字段中删除该值。

在输入后清除字段似乎是一个可笑的黑客，但我花了 4 个小时搜索网络并查看谷歌的 api 并找不到更好的解决方案。

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

Answer 6

试试：

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

或

inputId_div.value = '';

我不确定你为什么使用inputId_div[0]。我猜它一定是 jQuery 的东西。