郵便番号を入力すると住所をリアルタイムで補完してくれるjQueryプラグイン「jquery.jpostal.js」

入力フォームでよく見かける、郵便番号を入力すると自動的に郵便番号から住所を割り出して保管してくれるあれです、郵便番号を入力するとリアルタイムに表示してくれるようになっています。また、こちらのプラグインはCDNで配信されているので、郵便番号の変化とかあったらプラグイン側で更新があればそれが使われるので最新の状態を保つことが出来る。

jquery.jpostal.js

https://code.google.com/p/jpostal/

使い方

DEMO 表示

jQueryとプラグインをCDNで読み込む

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="//jpostal.googlecode.com/svn/trunk/jquery.jpostal.js"></script>

郵便番号を入力するinput要素と表示するinput要素を指定するスクリプト

$(window).ready( function() {
 // #postcode が郵便番号を入力するinput要素
 $('#postcode').jpostal({
  postcode : [
   '#postcode'
  ],
  // #address が住所を表示するinput要素
  address : {
   '#address1' : '%3%4%5'
  }
 });
});

郵便番号は数字のみので「1234567」の7文字での入力と途中にハイフンが入った「123-1234」両方に対応。また前半と後半に分けての利用も可能です。住所の表示には「%3」「%4」「%5」で表示内容を扱います。%3が都道府県、%4には区、市、郡などが入ります %5には町など以下の住所が入るようになっています。一つの項目に表示する場合は連ねて「%3%4%5」の様にして表示する事が出来ます。住所も郵便番号の入力と同じく分割する事が出来ます

住所のフォーマット

書式	項目
%3	都道府県
%4	市区町村
%5	町域
%6	大口事業所の番地
%7	大口事業所の名称

郵便番号と住所の入力を分割しているケース

$(window).ready( function() {
 $('#postcode1').jpostal({
  postcode : [
   '#postcode1',
   '#postcode2'
  ],
  address : {
   '#address1' : '%3',
   '#address2' : '%4',
   '#address3' : '%5'
  }
 });
});

入力項目と表示項目が分割している場合には postcodeとaddressの配列にinput要素を追加していけばOKです

フォームのHTMLの例

<form action="">
  <label for="postcode">郵便番号</label>:
  <input type="text" name="postcode" id="postcode" placeholder="123-1234">
  <br>
  <label for="address1">住所1</label>:
  <input type="text" name="address1" id="address1" placeholder="東京・・・" disabled>
  <br>
  <label for="address2">住所2</label>:
  <input type="text" name="address2" id="address3" placeholder="マンション名や番地等">
</form>

郵便番号の入力が一つで住所の入力がプラグインで保管されるところまでのものと、残りを入力するものとの構成になったフォームです。

全体的なサンプルコード (DEMOの内容と同じものです)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1.0">
  <title>Document</title>
  <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
  <script type="text/javascript" src="//jpostal.googlecode.com/svn/trunk/jquery.jpostal.js"></script>
  <style>
    label {
      display: inline-block;
      width: 100px;
    }
    form {
      width: 300px;
      margin: 100px auto;
    }
  </style>
</head>
<body>
  <form action="">
    <label for="postcode">郵便番号</label>:
    <input type="text" name="postcode" id="postcode" placeholder="123-1234">
    <br>
    <label for="address1">住所1</label>:
    <input type="text" name="address1" id="address1" placeholder="東京・・・" disabled>
    <br>
    <label for="address2">住所2</label>:
    <input type="text" name="address2" id="address3" placeholder="マンション名や番地等">
  </form>
  <script>
    $(window).ready( function() {
      // #postcode が郵便番号を入力するinput要素
      $('#postcode').jpostal({
        postcode : [
          '#postcode'
        ],
        // #address が住所を表示するinput要素
        address : {
          '#address1' : '%4%5'
        }
      });
    });
  </script>
</body>
</html>

SAMPLE DOWNLOAD