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

Posted 2023-02-23

【中文标题】如何清除绑定到 Google Places Autocomplete 的输入？

【英文标题】：How to clear the input bound to the Google Places Autocomplete?

【发布时间】：2013-01-01 06:47:08

【问题描述】：

这是我的问题：我正在使用 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();

谢谢！

【参考方案1】：

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

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

【讨论】：

它确实有效！尽管它是一个 hack =) 唯一的问题是它会在几分之一毫秒内“闪烁”自动完成下拉菜单。

是的，我已经看到了。但我发现的唯一其他选择是用新输入替换输入并创建一个新的自动完成，恐怕这会造成内存泄漏。您可以尝试在开始时将输入的可见性设置为“隐藏”，然后在结束时设置回“可见”。

嗯，你不能专注于隐藏的输入。

对不起，我不是指输入，我指的是下拉列表$('.pac-container')

我试过了，但谷歌不允许你隐藏它，它会自动把它带回来！遗憾的是，他们没有一种方法可以在不必经历所有这些的情况下彻底清除它。

【参考方案2】：

清除你可以使用的地方：

autocomplete.set('place',null);

它也会触发 place_change 事件。

【讨论】：

IMO 这是最好的解决方案。

【参考方案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();

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

【讨论】：

IMO 这是解决问题的正确方法，谢谢！

【参考方案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 并找不到更好的解决方案。

【参考方案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);

【参考方案6】：

试试：

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

或

inputId_div.value = '';

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

【讨论】：

是的，我使用 inputId_div[0] 只是因为我更喜欢使用 jQuery。

@Tristan，对，但是指向输入字段的变量是什么？ inputId_div[0] 建议 inputId_div 是一个数组，它应该是一个标量。 （我从未使用过 jQuery）。

inputId_div[0] 在 jQuery 的 var inputId_div = $("#myinput");相当于 javascript 中的 inputId_div var inputId_div = document.getElementById(inputId);