如何打开和关闭 google-maps 自动完成功能？

Question

I'm instantiating an autocomplete input for Google Maps API (level 3), like so:

var input = document.getElementById('szukanyAdres');
autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);

How to turn the autocompletion functionality on and off at runtime?

Answer 1

To remove all listeners added to autocomplete.

autocomplete.unbindAll();

To remove all listeners added to input element.

google.maps.event.clearInstanceListeners(input);

See https://code.google.com/p/gmaps-api-issues/issues/detail?id=3429

Answer 2

The solution of Dr.Molle doesn't work for me.

The solution I found is to clearListener and remove pac-container:

var autocomplete;
var autocompleteListener;
function disableGoogleAutocomplete() {
    if (autocomplete !== undefined) {
            google.maps.event.removeListener(autocompleteListener);
            google.maps.event.clearInstanceListeners(autocomplete);
            $(".pac-container").remove();

            console.log('disable autocomplete to GOOGLE');
     }
}
function enableGoogleAutocomplete() {
    autocomplete = new google.maps.places.Autocomplete($("#inputDiv input")[0], options);
    autocompleteListener = google.maps.event.addListener(autocomplete, 'place_changed', function() { ... }
    console.log('set autocomplete to GOOGLE');
}

Now I can switch on/off google places Autocomplete.

Answer 3

There are two elements related to the autocomplete

1. the input-element
2. a div that contains the list-entries. this div will be appended to the body and has the class "pac-container"

So what you can do: show or hide both elements by modifying their display-style.

---

When it's not possible to hide the input you may replace the input with a clone of the input, this will remove the autocomplete-functionality.

inputObject.parentNode.replaceChild(inputObject.cloneNode(true),input);

To restore the autocomplete do again what you want to do.

Answer 4

If anything written here does not work for you, you can try to just hide it. The field with places appearing while typing is in css class .pac-container, so just declare it in css display: none. Then it will not appear during typing in searchbox. Actually it is not the way to customize it.

Answer 5

您可以尝试使用 JQuery 隐藏它：

$(".pac-container").hide(); //hide autocomplete

Answer 6

I faced the problem as well (in my app I wanted to run the google's autocomplete only when user typed at least 4 digits into my input field - I am using my custom smart search when typed string has less than 4 digits).

In my case above solutions didn't work either, so my workaround is:

1. Set opacity: 0 to the $('.pac-container') when you need.
2. Optionally set also low z-index if needed.