Verwenden von zippopotam.us zum automatischen Auffüllen von Postleitzahlen, wenn Benutzer Stadt und Status eingeben

Question

Ich weiß, dass Sie die API zippopotam verwenden können, um die Stadt und den Status einer bestimmten Postleitzahl automatisch zu füllen, aber ich versuche einen Weg zu finden Verwenden der API zum automatischen Auffüllen der Postleitzahl, wenn eine Stadt und ein Bundesstaat angegeben wird.

Wenn Sie sich den unten stehenden Ajax-Aufruf ansehen, können Sie sehen, dass ich eine Anfrage mit dem Postleitzahlenwert mache, aber wenn Sie einen anderen Parameter als die Postleitzahl übergeben, wird ein leerer JSON-Block zurückgegeben.

Ich war nur neugierig, hat jemand Erfahrung mit Zippopotam Antworten auf diese Weise zu verwenden oder zu manipulieren?

Wenn nicht gibt es eine andere mögliche einfache Lösung da draußen habe ich vielleicht noch nicht gefunden?

<script> 
    $(function() { 

     // OnKeyDown Function 
     $("#zip").keyup(function() { 
     var zip_in = $(this); 
     var zip_box = $('#zipbox'); 

     if ((zip_in.val().length == 5)) 
     { 
      // Make HTTP Request 
      $.ajax({ 
      url: "http://api.zippopotam.us/us/" + zip_in.val(), 
      cache: false, 
      dataType: "json", 
      type: "GET", 
      success: function(result, success) { 
       // Make the city and state boxes visible 
       // US Zip Code Records Officially Map to only 1 Primary Location 
       places = result['places'][0]; 
       $("#city").val(places['place name']); 
       $("#state").val(places['state']); 
       zip_box.addClass('success').removeClass('error'); 
      }, 
      error: function(result, success) { 
       zip_box.removeClass('success').addClass('error'); 
      } 
      }); 
     } 
    }); 
    }); 

    </script> 

<fieldset> 
     <legend>US Address Autocompletion</legend> 
     <br/> 
     <div> 
      <div id="zipbox" class="control-group"> 
      <label for="zip">Zip</label> 
      <input type="text" class='' pattern="[0-9]*" name="zip" id="zip" placeholder="Type your ZIP code"/> 
      </div> 
     </div> 
     <div> 
      <div id="citybox" class="control-group" > 
      <label for="city">City</label> 
      <input type="text" name="city" id="city" placeholder="" /> 
      </div> 
      <div id="statebox" class="control-group"> 
      <label for="state">State</label> 
      <input type="text" name="state" id="state" placeholder="" /> 
      </div> 
     </div> 
     </fieldset> 

Answer 1

In den meisten Städten gibt es mehr als eine Postleitzahl, daher müssen Sie spezifischer als Stadt/Bundesland sein, um eine einzelne Postleitzahl automatisch zu füllen.

Jedoch zippopotam.us does provide an API for getting ZIP codes based on city/state.

Die URLs haben die Form http://api.zippopotam.us/country/state/city.

Hier ist ein Beispiel, wie man es benutzt. Versuche z.B. Stadt = "Peoria" und State = "IL"

function getZips() { 
 
    var city = document.getElementById("city").value; 
 
    var state = document.getElementById("state").value; 
 
    var client = new XMLHttpRequest(); 
 
    client.open("GET", "http://api.zippopotam.us/us/" + state + "/" + city, true); 
 
    client.onreadystatechange = function() { 
 
    if (client.readyState == 4) { 
 
     document.getElementById("result").innerHTML = 
 
     JSON.stringify(JSON.parse(client.responseText), null, 4); 
 
    }; 
 
    }; 
 
    client.send(); 
 
    return false; 
 
}

<form> 
 
    City:<br> 
 
    <input type="text" id="city"><br> 
 
    State (postal abbr.):<br> 
 
    <input type="text" id="state"><br> 
 
</form> 
 
<br> 
 
<button onclick="getZips()">Submit</button> 
 
<hr> 
 
<h3>Results:</h3> 
 
<pre id="result"></pre>