无法删除 google 个地方的自动完成功能？

Question

var autocomplete = new google.maps.places.Autocomplete(input, {
  types:  ['geocode']
});

我现在如何删除它？

有 "autocomplete.unbindAll()" 功能，但它不会删除下拉框的 HTML。我有一个页面做很多 Ajaxy 的事情，因为这个下拉框不断被添加，即使在页面上的给定时间只有一个自动完成：|

Answer 1

无论您现在在哪里调用 autocomplete.unbindAll() 而不是（也？）调用 input.parentNode.removeChild(input)？这基本上就是

的出色答案中发生的事情

然而，与那个问题不同的是，您抱怨 'multiple dropdown boxes'。

您的 真正的 问题似乎是您针对不同的 input 节点多次调用 new google.maps.places.Autocomplete(...) 。你不能避免吗？你在哪里 'creating' 一个新节点，只需将 'initialized' 节点拉到文档中你现在要使用它的位置，使用 JS DOM API。如果你想暂时看不见它，就把它藏起来。

如果您使用绑定框架，这似乎有点困难，但您必须以某种方式从它正在做的事情中获得对 new Autocomplete 的调用。

Answer 2

假设事情是这样初始化的

var autocomplete = new google.maps.places.Autocomplete(input, {types: ['geocode']});
var autocompleteLsr = google.maps.event.addListener(autocomplete, 'place_changed', function() { ... });

google 地图 API 还提供 removeListener 和 clearInstanceListeners 以供删除。 https://developers.google.com/maps/documentation/javascript/reference#event

作为一个可选步骤，您也应该删除这个 $(".pac-container")

google.maps.event.removeListener(autocompleteLsr);
google.maps.event.clearInstanceListeners(autocomplete);
$(".pac-container").remove();

Answer 3

虽然是旧的post，但我现在想回答它，因为它会对某人有所帮助。

删除自动完成实例上的侦听器或 unbindall() 不会删除自动建议的发生，并且从 DOM 中删除“.pac-container”不是干净的解决方案。

自动完成的新实例意味着输入元素与自动完成实例挂钩，因此我们必须清除输入元素的侦听器而不是自动完成实例。

google.maps.event.clearInstanceListeners(input);

Answer 4

我发现当您使用 $(".pac-container").remove(); 时，自动完成将不会再次显示，直到您刷新或更改页面。所以它不适用于SPA。我发现你可以直接使用它并且效果很好：

autocomplete.addListener('place_changed', function () {
    $('.pac-item').remove();
  });

Answer 5

隐藏 Google 自动完成下拉建议

要隐藏建议：

 $(".pac-container").css("visibility", "hidden");

显示建议：

 $(".pac-container").css("visibility", "visible");

根据 jquery 个事件触发隐藏或可见：

 $("#location").on("keydown click keyup keypress blur change focus", function(){

        if(!$('#geoAutocomplete').is(":checked")){
            $(".pac-container").css("visibility", "hidden");
        }else{
            $(".pac-container").css("visibility", "visible");
        }

    });

注意：我有一个带有 id geoAutocomplete 的复选框，供用户打开和关闭自动完成功能。

Answer 6

试试这个。 Google 使用最少的字符放置库自动完成

const autocompleteInput = document.getElementById('ID');

//initialize map after 2 chars are typed
$('#ID').keyup(function(e) {
    if ($(this).val().length < 3) {
        if (autocompleteInput) {

            google.maps.event.clearInstanceListeners(autocompleteInput);
            $(".pac-container").remove();
        }
        e.stopImmediatePropagation()
    } else {
        const autocomplete = new google.maps.places.Autocomplete(autocompleteInput, {
            fields: ["address_components", "geometry", "name"],
            types: ["address"],
        });
        autocomplete.addListener('place_changed', function() {
            const place = autocomplete.getPlace();
            if (!place.geometry) {
                // User entered the name of a Place that was not suggested and
                // pressed the Enter key, or the Place Details request failed.
                alert('No details available for input: \'' + place.name + '\'');
                return;
            }
            fillInAddress(place);
            google.maps.event.clearInstanceListeners(autocompleteInput);
        });
    }
});

function fillInAddress(place) { // optional parameter
    const addressNameFormat = {
        'locality': 'long_name'
    };
    const getAddressComp = function(type) {
        for (const component of place.address_components) {
            if (component.types[0] === type) {
                return component[addressNameFormat[type]];
            }
        }
        return '';
    };
    $("#City").val(getAddressComp('locality'));
}
});

无法删除 google 个地方的自动完成功能？

No way to remove google places autocomplete?

javascript

google-maps

google-places-api