2015-04-24 18 views
7

Próbuję utworzyć pole tekstowe autouzupełniania, które powinno zawierać tylko kod pocztowy. Oto dokumenty, które śledzę: https://developers.google.com/places/webservice/autocomplete#place_typesGoogle Autouzupełnianie miejsca dla kodu pocztowego

JSFiddle przykład praca jest here

Jeśli używam postal_code jej nie działa dla mnie, ale kiedy używam cities grzywny. Co powinienem zrobić, aby uzyskać autouzupełnianie z tylko kodami pocztowymi?

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); 

Odpowiedz

9

The documentation nie jest bardzo jasne.

  • The (regionów) typ kolekcji instruuje miejsc usługę powrócić żadnych rezultatów spełniających następujące typy:
    • miejscowości
    • sublocality
    • postal_code
    • kraj
    • administrative_area_level_1
    • reklama ministrative_area_level_2
+0

jesteś absolutnie poprawne Próbowałem nawet „regiony” i to działało, ale każdy pomysł, w jaki sposób mogę ograniczyć to specjalnie z kodem pocztowym? –

+1

Jeśli dokumentacja zostanie zinterpretowana tak, jak wskazałem w mojej odpowiedzi, nie byłbyś w stanie tego zrobić. Jeśli interpretujesz wypunktowaną listę jako dodatkowe "dozwolone" typy, to powinna ona działać teraz. – geocodezip

+0

Czy zawiera wyniki wszystkich typów lub przynajmniej jednego z nich? – Jay

1

kiedyś postal_code typ komponentu adresu.

Upewnij się, obejmowały places bibliotekę w adresie URL skrypt jako:

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

przykładzie roboczym

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

////////// części z kodem My PRACY
////////// Wymień getByElementId z formularza identyfikatorów wejściowych

//// 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

Wiem, że to trochę stare, ale ... Pomyślałem, że powinienem podzielić się moją wiedzą i mam nadzieję, że to komuś pomogło.

@geocodezip ma rację, nie możesz wyraźnie poprosić Google o zwrócenie tylko wyników z kodu pocztowego. Możesz jednak poprosić regiony i poinformować użytkownika, kiedy wszystko zepsute!

To jest kod, którego używam.Wykorzystuje 2 wejścia; przedrostek adres (nazwa domu/numer) i kod pocztowy

Wymagania:
div z 2 wejściami (na poszukiwania).
Poniżej że kontener div, który zawiera wejścia z poniższym id użytkownika (mogą one być poprzedzone)

  • Address1
  • Address2
  • Miasto
  • County
  • Kod pocztowy
  • Kraj

Każdy z mojego użytkownika Wejścia mają klasę "InputControl", więc używam jej w mojej funkcji do kasowania poprzednich wartości.

Stosując to

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", ""); 
} 

Główną funkcją

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(); 
} 

funkcje pomocnicze

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(); }); }); 
} 

Jeśli chcesz przycisk (jak ja)

$("#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 }); 
}); 
Powiązane problemy