Google Place Autocomplete Address Form after typing 5 characters

问题

I am using the code taken from the Google Developer website (https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform), which is indicated below. With this code, the google autocomplete address list appears below the address text-box just after typing the first character. I would like to be able to type 5 characters before the google list drops down. I look forward anyone of you could help me to get my aim. Thank you in advance!

// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.

var placeSearch, autocomplete;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name'
};

function initAutocomplete() {
  // Create the autocomplete object, restricting the search to geographical
  // location types.
  autocomplete = new google.maps.places.Autocomplete(
      /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
      {types: ['geocode']});

  // When the user selects an address from the dropdown, populate the address
  // fields in the form.
  autocomplete.addListener('place_changed', fillInAddress);
}

function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}

// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}

回答1:

A customer wanted to have autocompletion triggered only if more than 2 chars were entered. I could not find an "out-of-the-box" solution (feature request opened at https://code.google.com/p/gmaps-api-issues/issues/detail?id=10367 on Google Code).

Thx to Zme...@gmail.com (https://code.google.com/p/gmaps-api-issues/issues/detail?id=3429), I could work out following solution that fulfills the need.

if (1 < query.length) { // if 2 chars or more entered
                if (undefined == self.googleAutocomplete) { //... and Google Autocomplete not set yet
                    console.debug('trigger autocomplete !');
                    self.googleAutocomplete = new google.maps.places.Autocomplete(self.HtmlElement, self.settings.google_options);
                }   
                // ! Beware : with 2 chars => we are only SETTING the autocompletion : actual suggestions will start from 3rd char...
                google.maps.event.addListener(self.googleAutocomplete, 'place_changed', function () {
                    // do whatever with suggestion selected...
                }
            } else if (undefined != self.googleAutocomplete) { // if less than 2 chars
                    console.debug('unbind autocomplete !');
                    // removing autocompletion : Thx to Zme...@gmail.com 
                    //... on https://code.google.com/p/gmaps-api-issues/issues/detail?id=3429
                    $(".pac-container").remove();
                    google.maps.event.clearListeners(self.HtmlElement);
                    self.googleAutocomplete = undefined;
            }

Although it worked for me, I still think it is a shame to go through such heavy object instanciation/deletion just to activate/disactivate autocompletion. Do not hesitate to vote in favor of having such a feature implemented in Google Autocompletion Api at https://code.google.com/p/gmaps-api-issues/issues/detail?id=10367, if you deem it usefull.

Have a good day

回答2:

https://code.google.com/p/geo-autocomplete/ 

It's a jqueryplugin with some features like minlength

I vl see the plugin code and try to find out how plugin does this

here's a demo with min length 3

http://geo-autocomplete.googlecode.com/svn/trunk/demo/ui.demo.html

回答3:

The only way that I know that you can have that kind of fine grain control over the search is to use Google's AutocompleteService where you call the query when you are ready.

This is a sample code at Google. The drawback of this method is that you have to build the input parameter by listening to the keystrokes, as well as handle the placement of the pac-container, or whatever container you wish to use for the results on the screen, and a click listener, when the user clicks on a selection, which the Autocomplete call normally handles for you.

来源：https://stackoverflow.com/questions/33169605/google-place-autocomplete-address-form-after-typing-5-characters