郵便番号を入力すると住所を自動補完して表示してくれる jQuery ライブラリ［jquery.jpostal.js］が非常に便利だったのでご紹介します。

同機能の他の jQuery プラグインは大容量のデータファイルをサーバーにアップする必要があったり、設定が面倒だったりするケースが目立ちますが、この［jquery.jpostal.js］は設置も比較的ラクにできます。

プラグインの詳細は以下。

jquery.jpostal.js

スクリプトは Google に公開されているファイルを直接読み込むことができ、メンテナンスも不要。基本的に以下２つのファイルを読み込むだけなので簡単です。

<script src="http://code.jquery.com/jquery-git2.js"></script>
<script src=http://jpostal.googlecode.com/svn/trunk/jquery.jpostal.js"></script>

HTML のフォーム（<form>）部分の記述は以下のように。

<form>
<fieldset class="fieldset">
<label>郵便番号 〒</label>
<input id="postcode1" name="postcode1" maxlength="3">-<input id="postcode2" name="postcode2" maxlength="4">
</fieldset>

<fieldset class="fieldset">
<label>都道府県</label>
<select id="address1" name="address1">
	<option value="" selected="selected">選択してください </option>
	<option value="北海道">北海道</option>
	<option value="青森県">青森県</option>
	<option value="岩手県">岩手県</option>
	<option value="宮城県">宮城県</option>
	<option value="秋田県">秋田県</option>
	<option value="山形県">山形県</option>
	<option value="福島県">福島県</option>
	<option value="茨城県">茨城県</option>
	<option value="栃木県">栃木県</option>
	<option value="群馬県">群馬県</option>
	<option value="埼玉県">埼玉県</option>
	<option value="千葉県">千葉県</option>
	<option value="東京都">東京都</option>
	<option value="神奈川県">神奈川県</option>
	<option value="新潟県">新潟県</option>
	<option value="富山県">富山県</option>
	<option value="石川県">石川県</option>
	<option value="福井県">福井県</option>
	<option value="山梨県">山梨県</option>
	<option value="長野県">長野県</option>
	<option value="岐阜県">岐阜県</option>
	<option value="静岡県">静岡県</option>
	<option value="愛知県">愛知県</option>
	<option value="三重県">三重県</option>
	<option value="滋賀県">滋賀県</option>
	<option value="京都府">京都府</option>
	<option value="大阪府">大阪府</option>
	<option value="兵庫県">兵庫県</option>
	<option value="奈良県">奈良県</option>
	<option value="和歌山県">和歌山県</option>
	<option value="鳥取県">鳥取県</option>
	<option value="島根県">島根県</option>
	<option value="岡山県">岡山県</option>
	<option value="広島県">広島県</option>
	<option value="山口県">山口県</option>
	<option value="徳島県">徳島県</option>
	<option value="香川県">香川県</option>
	<option value="愛媛県">愛媛県</option>
	<option value="高知県">高知県</option>
	<option value="福岡県">福岡県</option>
	<option value="佐賀県">佐賀県</option>
	<option value="長崎県">長崎県</option>
	<option value="熊本県">熊本県</option>
	<option value="大分県">大分県</option>
	<option value="宮崎県">宮崎県</option>
	<option value="鹿児島県">鹿児島県</option>
	<option value="沖縄県">沖縄県 </option>
</select>
</fieldset>

<fieldset class="fieldset">
<label>市区町村</label>
<input id="address2" name="address2">
<label>町域</label>
<input id="address3" name="address3">
</fieldset>

<input type="reset" value="クリア">
</form>

最後に <input> 要素にIDを指定して、住所を自動表示させたい箇所に紐づけていきます。

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

設定は以上。
以下、デモサイトも用意しているので合わせてご確認ください。

デモ：郵便番号から住所を自動補完する［jquery.jpostal.js］の実装