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

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事件.