フォームに入力した郵便番号から住所を自動入力してくれるjQueryプラグイン「jquery.jpostal.js」

jquery.jpostal.jsは、フォームで入力した郵便番号から住所を自動的に取得してくれるjQueryプラグインです。フォームで住所を入力してもらう時に、郵便番号を入れるだけで住所欄に住所を自動入力してくれるので、住所入力の手間が省けます。

jquery.jpostal.jsの特徴としては、CDNで提供されているため、ファイルをダウンロードしてサーバーに設置する必要がありません。それに、CDNにホストされているファイルを読み込むため、利用者側で住所のデータを更新するという煩わしさもありません。

動きとしては、以前紹介したjQuery.zip2addrと同じで、郵便番号を入力するとリアルタイムに住所を表示してくれます。ものすごく簡単なデモを用意したので、動作については以下よりご確認ください。郵便番号は、ハイフンありとなし、どちらにも対応しています。

デモページを見る

jquery.jpostal.jsの実装方法

フォームの設置

まずは、フォームを設置します。今回は、以下のように郵便番号にはpostcode、住所にはaddressというIDを付けました。

<form action="">
  <label for="postcode">郵便番号</label>:
  <input type="text" name="postcode" id="postcode" placeholder="例)123-4567">
  <br>
  <label for="address">住所</label>:
  <input type="text" name="address" id="address" placeholder="住所が自動入力されます">
</form>

IDは任意のものに変更してOKです。

jquery.jpostal.jsの呼び出し

続いて、jQueryとjquery.jpostal.jsを呼び出します。

<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="//jpostal-1006.appspot.com/jquery.jpostal.js"></script>
<script>
$(window).ready( function() {
  $('#postcode').jpostal({
    postcode : [
      '#postcode'
    ],
    address : {
      '#address' : '%3%4%5'
    }
  });
});
</script>

postcodeとaddressの部分は、フォームで指定したIDを入れてください。

addressのところに入っている「%3%4%5」は、それぞれ以下の値を返します。

郵便番号欄と住所欄が分割されている場合は、以下のようにそれぞれのIDを指定します。

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

address1には都道府県、address2には市区町村、address3には町域が入ります。

あとがき

より詳しい使い方については、GitHubにてご確認ください。

ちなみに、郵便番号は半角で入力しないと反応してくれません。jQuery.zip2addrは全角で入力しても、自動的に半角に直してくれるので、この点はjQuery.zip2addrの方が優れていると言えますね。

それにしても、ファイルをダウンロードしてきて、サーバーに設置する必要がないという、手軽さは素晴らし過ぎますね。フォームに住所欄を設置している場合は、ぜひお試しください。フォームの離脱率が下がるかもしれませんよ。