Question

以下是我的问题：我正在使用Google地方信息自动填充功能从用户那里收集有关地点的信息。

在事件“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

上一个术语仍存在于自动完成对象中。

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

声明：

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 3

清除可以使用的地方：

autocomplete.set('place',null);

它也触发了place_change事件。

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

$这是对自动填充字段的jQ引用。当您键入值并将Tab键输入自动完成列表并按Enter键时，将触发blur事件。当您使用鼠标单击某处时，模糊事件将触发并清除该字段。

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

在投入后清除该字段似乎是一个荒谬的黑客，但我花了4个小时搜索网络，看看谷歌的api，无法找到更好的解决方案。

Answer 5

作为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);

Answer 6

为了更好的互联网...

简单地触发模糊，调用Google商家信息来开展业务。然后，执行你的逻辑。

inputId_div.trigger('blur');

如果Google值闪烁是个问题，请尝试将下一个操作链接起来。

Answer 7

尝试：

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

或

inputId_div.value = '';

我不确定您使用inputId_div[0]的原因。我想它一定是jQuery的东西。

如何清除绑定到Google商家信息自动填充功能的输入？

7 个答案: