郵便番号から住所を自動的に補完してくれる JavaScript のライブラリに AjaxZip 2.0 - Ajax郵便番号→住所自動入力フォーム(CGI不要版) がありますが、それを jQuery のプラグインとして実装したものを作ってみました。

jquery.ajaxzip2

通常版と、スペースや改行などが圧縮された minify 版があります。使い方はリンク先の github に書いてあるので参考にしてください。

また jquery.ajaxzip2 を実装するにあたって、さらに使いやすくするために従来の AjaxZip2 を少し拡張しました。

拡張機能

次のような機能を新たに追加しています。

住所補完後の動作をコールバック関数で指定可能

郵便番号から住所を補完する際に JSON 形式の住所データを非同期に取得しにいきますが、それが完了した後に呼び出されるコールバック関数を指定できるようにしました。

たとえば以下のようにして、郵便番号に対する住所が見つかって補完が完了した場合に、メールアドレスにフォーカスを当てることができます。

$('#zip').zip2addr({
  success: function() {
    $('#mail').focus();
  }
});

コールバック関数の引数には、見つかった住所データが渡されます。

住所が見つからなかった時の動作をコールバック関数で指定可能

郵便番号から住所が見つからなかった場合に呼び出されるコールバック関数を指定できるようにしました。

たとえば以下のようにして、住所が見つからなかった時にエラーメッセージを表示することができます。

$('#zip').zip2addr({
  error: function() {
    $('#error').text('住所が見つかりませんでした');
  }
});

フォーム要素以外への住所補完

div 要素や a 要素などでも ID が指定してあればそこへ補完できるようにしました。

たとえば以下の様な HTML の場合でも

郵便番号
<input type="text" name="zip" id="zip" />

都道府県
<div id="pref"></div>
市区町村
<div id="city"></div>
町域
<div id="area"></div>
番地
<div id="street"></div>

通常通りこのプラグインを呼び出すと

$('#zip').zip2addr();

それぞれの div 要素へ住所が補完されます。