2015-04-24 10 views
7

Ich versuche, ein Autocomplete-Textfeld zu erstellen, das nur die Postleitzahl enthalten sollte. Hier ist die Dokumentation, die ich verfolgt haben: https://developers.google.com/places/webservice/autocomplete#place_typesGoogle Place Autocomplete für Postleitzahl

JSFiddle Arbeitsbeispiel ist here

Wenn ich die postal_code bin mit seinem nicht für mich arbeiten, aber wenn ich bin mit der cities seiner Ordnung. Was muss ich tun, um eine automatische Vervollständigung mit nur Postleitzahlen zu erreichen?

function postal_code() { 
    var input = document.getElementById('field-postal'); 
    var options = { 
    types: ['(postal_code)'], 
    componentRestrictions: { 
     country: "in" 
    } 
    } 
    var autocomplete = new google.maps.places.Autocomplete(input, options); 
} 

google.maps.event.addDomListener(window, 'load', postal_code); 

Antwort

9

Die documentation ist nicht sehr klar.

  • die (Regionen) Sammlung geben Sie weist den Places-Dienst kein Ergebnis zurück folgende Typen passend:
    • Ort
    • Nachbar
    • postal_code
    • Land
    • administrative_area_level_1
    • ad ministrative_area_level_2
+0

Sie absolut richtig sind I ‚Regionen‘ sogar versucht, und es hat funktioniert, aber eine Idee, wie kann ich diese Begrenzung speziell auf die Postleitzahl? –

+1

Wenn die Dokumentation so interpretiert wird, wie ich es in meiner Antwort angegeben habe, wäre dies nicht möglich. Wenn Sie die Aufzählungsliste als zusätzliche zulässige Typen interpretieren, sollte sie jetzt funktionieren. – geocodezip

+0

Enthält es Ergebnisse mit allen diesen Typen oder nur einer davon? – Jay

1

I postal_code Adresse Komponententyp verwendet.

Stellen Sie sicher, dass Sie enthalten die Orte Bibliothek in Ihrem Skript url als:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCBbt5ueucPc0u9VQDb8wFvFigV90PpTQA&libraries=places&callback=initEditClntInfoAutoComplete" async defer> </script> 

Arbeitsbeispiel

https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete 

////////// TEIL VON MEINER ARBEITS CODE
////////// ersetzen getByElementId mit Formulareingabe IDs

//// Global Vars 

    var editClntInfoAutocomplete, addrStreet ="", 
     addressComponets = { 
        street_number: 'short_name', 
        route: 'long_name', 
        locality: 'long_name', 
        administrative_area_level_1: 'short_name', 
        country: 'long_name', 
        postal_code: 'short_name' 
     }; 

function initEditClntInfoAutoComplete() { // Callback 

     editClntInfoAutocomplete = new google.maps.places.Autocomplete(
      /** @type {!HTMLInputElement} */(document.getElementById('clntInfoEditAddr1')), 
      {types: ['geocode']}); 

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

    function fillInEditClntInfoAddress() { 

     var place = editClntInfoAutocomplete.getPlace();   

      clearPrevEditFrmAddrVals(); 

     for (var i = 0; i < place.address_components.length; i++) { 

       var addressType = place.address_components[i].types[0]; 
       if ( addressComponets[addressType]) { 
        var val = place.address_components[i][addressComponets[addressType]];     

        assignEditFrmAddrFieldsVal(addressType, val); 
       } 

     } 

      if(addrStreet != "") 
       document.getElementById("clntInfoEditAddr1").value = addrStreet; 

    } 

    function assignEditFrmAddrFieldsVal(addressType , val) { 

      switch(addressType) { 
       case "administrative_area_level_1": 
         document.getElementById("clntInfoEditState").value = val; break; 
       case "locality": 
        document.getElementById("clntInfoEditCity").value = val; break; 
       // case "country": 
       //  document.getElementById("addressType").value = val; break; 
       case "postal_code": 
        document.getElementById("clntInfoEditZip").value = val; break; 
       case "street_number": 
       case "route":  
        addrStreet += " "+val;  break; 

      } 

    } 

    function clearPrevEditFrmAddrVals(){ 
     var editClntFrmAddrIDs = ["clntInfoEditState","clntInfoEditCity","clntInfoEditZip","clntInfoEditAddr1"]; 
      addrStreet = ""; 

     for(var frmID in editClntFrmAddrIDs) 
       wrap(editClntFrmAddrIDs[frmID]).val(""); 
    } 
0

Ich weiß, das ist ein bisschen alt, aber ... Ich dachte, ich sollte mein Wissen teilen und hoffe, es hilft jemandem.

@geocodezip ist richtig, Sie können Google nicht ausdrücklich bitten, nur Postleitzahlenergebnisse zurückzugeben. Sie können jedoch Regionen anfordern und dem Benutzer mitteilen, wenn diese alles durcheinander gebracht haben!

Dies ist der Code, den ich verwende.Es verwendet 2 Eingänge; ein Adresspräfix (Haus Name/Nummer) und Postleitzahl

Anforderungen:
A div mit 2 Eingängen (für die Suche).
Darunter ist ein div Container, die Eingaben mit der unten ids enthält: (diese vorangestellt werden kann)

  • Address1
  • Address2
  • Stadt
  • Landkreis
  • Postleitzahl
  • Land

Jeder von meinem Benutzer Eingänge hat die Klasse "InputControl", also benutze ich diese in meiner Funktion um vorherige Werte zu löschen.

Mit ihm

var autoAddr; 

function initAutocomplete() { 
    autoAddr = new google.maps.places.Autocomplete(document.getElementById('AddressSearchField'), { types: ['(regions)'] }); 
    autoAddr.addListener('place_changed', FillInAddress); 
} 
function FillInAddress() { 
    GooglePlacesFillAddress(autoAddr, "#AddressCont", ""); 
} 

Die Hauptfunktion

function GooglePlacesFillAddress(Place, ContainerId, AddressPrefix) { 
    var 
     place = Place.getPlace(), 
     arr = ['premise', 'route', 'locality', 'postal_town', 'administrative_area_level_2', 'postal_code', 'country'], 
     dict = {}, 
     adr = $(ContainerId).find("#" + AddressPrefix + "Address1"), 
     switched = false, 
     switchedAgain = false, 
     searchAgain = $("<p id=\"" + AddressPrefix + "AddressSearchAgain\"><a href=\"javascript:void(0)\" class=\"Under\">I would like to search again</a></p>"), 
     asc = $("#" + AddressPrefix + "AddressSearchCont"), 
     adressPrefixValue = $("#" + AddressPrefix + "AddressSearchPrefixField").val().trim(); 

    SlideShow(ContainerId), 
    $(ContainerId).find("input.InputControl").val(''), 
    asc.find("#" + AddressPrefix + "AddressSearchField, #" + AddressPrefix + "AddressSearchPrefixField").attr("disabled", "disabled"), 
    asc.find("#" + AddressPrefix + "AddressSearchFieldButton").addClass("disabled"), 
    asc.find("#" + AddressPrefix + "AddressSearchPrefixField").after(searchAgain), 
    searchAgain.on("click", function() { 
     $(this).remove(), 
     asc.find("#" + AddressPrefix + "AddressSearchField, #" + AddressPrefix + "AddressSearchPrefixField").removeAttr("disabled").val(''), 
     asc.find("#" + AddressPrefix + "AddressSearchFieldButton").removeClass("disabled"), 
     asc.find("#" + AddressPrefix + "AddressSearchPrefixField").focus(); 
    }); 

    if (place.address_components && place.address_components.length) 
     for (var i = 0; i < place.address_components.length; i++) 
      for (var j = 0; j < place.address_components[i].types.length; j++) 
       if ($.inArray(place.address_components[i].types[j], arr) >= 0) 
        dict[place.address_components[i].types[j]] = place.address_components[i]["long_name"]; 

    $(ContainerId).find("#" + AddressPrefix + "City").val(dict["postal_town"] || ''); 
    $(ContainerId).find("#" + AddressPrefix + "County").val(dict["administrative_area_level_2"] || ''); 
    $(ContainerId).find("#" + AddressPrefix + "Postcode").val(dict["postal_code"] || ''); 
    $(ContainerId).find("#" + AddressPrefix + "Country").val(dict["country"] || 'United Kingdom'); 

    var isPostal = false; 
    if (place.types && place.types.length) 
     if ($.inArray("postal_code", place.types) >= 0 && $.inArray("postal_code_prefix", place.types) < 0) 
      isPostal = true; 

    // Add street number 
    InputAdder(adr, adressPrefixValue, true); 

    // Add premise 
    if (adressPrefixValue.length == 0 || adr.val().length + (dict["premise"] || '').length > 100) 
     adr = $(ContainerId).find("#" + AddressPrefix + "Address2"), switched = true; 
    InputAdder(adr, (dict["premise"] || ''), true); 

    // Add route 
    if (adr.val().length + (dict["route"] || '').length > 100) { 
     adr = $(ContainerId).find("#" + AddressPrefix + (switched ? "City" : "Address2")); 
     if (switched) 
      switchedAgain = true; 
     else 
      switched = true; 
    } 
    InputAdder(adr, (dict["route"] || ''), !switchedAgain, adressPrefixValue.length > 0 && adr.val() == adressPrefixValue); 

    // Add locality 
    InputAdder(switched ? adr : $(ContainerId).find("#" + AddressPrefix + "Address2"), (dict["locality"] || ''), !switchedAgain); 

    if (!isPostal) 
     WriteBorderedBox(false, ContainerId, "The postcode provided doesn't appear to be complete/valid. Please confirm the below address is correct."), 
     $(ContainerId).find("#" + AddressPrefix + "Address1").focus(); 
} 

Hilfsfunktionen

function InputAdder(Obj, Text, Post, DontAddComma) { 
    if (Obj && Text.length > 0) { 
     var 
      i = Obj.val().trim() || '', 
      comma = !!DontAddComma ? "" : ","; 

     Obj.val(
      (Post && i.length > 0 ? i + comma + ' ' : '') + 
      Text.trim() + 
      (!Post && i.length > 0 ? comma + ' ' + i : '')); 
    } 
} 
function WriteBorderedBox(outcome, identifier, text) { 
    var 
     box = $("<div class=\"Bordered" + (outcome ? "Success" : "Error") + "\"><p>" + text + "</p></div>"); 
    $(identifier).before(box); 
    box.hide().slideDown(function() { $(this).delay(6000).slideUp(function() { $(this).remove(); }); }); 
} 

Wenn Sie eine Taste wollen (wie mich)

$("#AddressSearchFieldButton").click(function (e) { 
    var input = document.getElementById("AddressSearchField"); 

    google.maps.event.trigger(input, 'focus') 
    google.maps.event.trigger(input, 'keydown', { keyCode: 40 }); 
    google.maps.event.trigger(input, 'keydown', { keyCode: 13 }); 
}); 
Verwandte Themen