使用 Ziptastic 根据邮政编码自动填充城市和州

大多数网页表单上的地址字段都会要求填写城市、州和邮政编码（或城市和邮政编码，美国以外地区）。但正如我们这些极客经常抱怨的那样，城市和州在邮政编码存在的情况下是冗余的。或者至少它们可以从正确输入的邮政编码中推断出来。这正是计算机擅长的事情。我们需要一个合适的 API 来根据需要为我们提供这些信息。

输入 Ziptastic，一个专门用于此的 API。**2017年4月更新**：Ziptastic 现在提供付费计划。在其常见问题解答中，他们表示仍然提供免费版本的版本 2 API，该版本每天限制 100 次请求。我们的演示将使用此版本！

表单标记

五个字段。两个用于街道，然后是城市、州和邮政编码。所有这些都包含在一个表单和字段集中。没有什么特别的。

<form action="#" method="post" class="fancy-form">

  <fieldset>
    <legend>Address</legend>

    <div>
      <div>
        <input type="text" name="address-line-1" id="address-line-1">
        <label for="address-line-1">Street #1</label>
      </div>
    </div>
    <div>
      <div>
        <input type="text" name="address-line-2" id="address-line-2">
        <label for="address-line-2">Street #2</label>
      </div>
    </div>
    <div>
      <div class="city-wrap">
        <input type="text" name="city" id="city">
        <label for="city">City</label>
      </div>
       <div class="state-wrap">
        <input type="text" name="state" id="state">
        <label for="state">State</label>
      </div>
       <div class="zip-wrap">
        <input type="text" pattern="[0-9]*" name="zip" id="zip">
        <label for="zip">Zip</label>
        <p class="zip-error">Not a real zip code.</p>
      </div>
    </div>

    <div>
      <input type="submit" value="Submit">
    </div>

  </fieldset>

</form>

最初只显示邮政编码

我们将隐藏所有包含表单元素行的 div。我们将使用 JavaScript，这样如果用户禁用了 JavaScript，表单仍然可用。

$(".fancy-form div > div").hide();

然后只显示邮政编码。

form .zip-wrap {
  display: block !important;
}

前端验证

在前端，我们已经尽最大努力通过 HTML5 输入属性 pattern、maxlength 和 required 来帮助正确输入邮政编码。

<input type="text" pattern="[0-9]*" maxlength="5" required name="zip" id="zip">

请注意，它不是 number 类型。在考虑 type=number 时，请考虑“我是否可以接受浏览器在这个数字中添加逗号？”，如果答案是否定的，请不要使用它，因为某些浏览器会这样做。

jQuery：监视有效邮政编码的输入

我们将监视邮政编码输入的按键。如果按键后的最终值是有效的邮政编码，我们将尝试通过 Ziptastic 获取城市和州，并显示其他字段。

$("#zip").keyup(function() {
  var el = $(this);

  if ((el.val().length == 5) && (is_int(el.val()))) {
   
    // Make Ajax call, etc
 
  }

}

is_int 函数只是一些额外的保护，以确保数字为整数（如所有邮政编码），以防当前浏览器不支持必要的 HTML5。

function is_int(value){ 
  if ((parseFloat(value) == parseInt(value)) && !isNaN(value)) {
    return true;
  } else { 
    return false;
  } 
}

jQuery：Ajax 数据

是的，jQuery。我们之前使用它来简化输入上的事件处理，但在这里确实需要它，因为它能够比使用原生 JavaScript 更轻松地进行 62 倍的 ajax 调用和错误处理。

通过验证后，我们可以进行 Ajax 调用。我们提供给它的数据只是我们收集到的邮政编码，然后我们得到一些 JSON 数据，从中可以轻松访问城市和州，并将它们作为值应用于相应的输入。

$.ajax({
  url: "http://zip.elevenbasetwo.com",
  cache: false,
  dataType: "json",
  type: "GET",
  data: "zip=" + el.val(),
  success: function(result, success) {

    $(".fancy-form div > div").slideDown(); /* Show the fields */

    $("#city").val(result.city); /* Fill the data */
    $("#state").val(result.state);

    $(".zip-error").hide(); /* In case they failed once before */

    $("#address-line-1").focus(); /* Put cursor where they need it */

  },
  error: function(result, success) {

    $(".zip-error").show(); /* Ruh row */

  }

});

当然，我们可以整天验证邮政编码的有效格式，但并非**每个** 5 位整数都是邮政编码。如果我们请求 Ziptastic 获取不存在的邮政编码，它将返回错误。在这种情况下，我们只需显示错误消息。

演示

查看 Chris Coyier 在 CodePen 上的 使用 Ziptastic 示例。(@chriscoyier)

笔记

• 我不会告诉你这是万无一失的。地址很复杂。我听说有些邮政编码跨越州界。
• Ziptastic 仅限美国使用。 在发布本文后的几天内，Ziptastic 开始支持国际邮政编码。 Zippopotamus 类似，支持 60 个国家/地区。