郵便番号から住所を自動入力 jquery.jpostal.js

一般的なお問い合わせフォームでは、名前、住所、電話番号・・・など色々な入力項目があると思いますが、
郵便番号を入力したら自動的に住所が入るようにして欲しいという要望があり、何かいい方法はないかなぁと思い探していたら、とても使いやすいプラグインを見つけたのでご紹介します。
本当に簡単で3ステップで完了します。

ライブラリの読み込み
jQuery本体とスクリプト本体とも外部のを直に読み込めば、何もアップロードの必要はありません。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://jpostal.googlecode.com/svn/trunk/jquery.jpostal.js"></script>

HTMLでフォームの作成
普通にフォームを作成し、各入力欄にidをそれぞれ割り振っておいてください。

<form>
   郵便番号:
   〒<input id="zip1" name="zip1" maxlength="3">
        -
     <input id="zip2" name="zip2" maxlength="4">

   都道府県:
   <select id="pref" name="pref">
      <option value="北海道">北海道</option>
			:
			:
			:
      <option value="沖縄県">沖縄県</option>
   </select>

   市区町村:
   <input type="text" id="city" name="city">

   町域:
   <input type="text" id="add" name="add">
</form>

スクリプトの実行
各入力項目のidを使ってスクリプトの記述をします。
上記でサンプルフォームの場合はこのようになります。

$('#zip1').jpostal({
	postcode : [
		'#zip1',   //郵便番号上3ケタ
		'#zip2'    //郵便番号下4ケタ
	],
	address : {
		'#pref'  : '%3',   //都道府県
		'#city'  : '%4',   //市区町村
		'#add'  : '%5'    //町域
	}
});

住所欄セレクタと入力項目フォーマットの連想配列

入力項目フォーマット
%3 都道府県
%4 市区町村
%5 町域
%6 大口事業所の番地
%7 大口事業所の名称
%8 都道府県カナ
%9 市区町村カナ
%10 町域カナ

サンプル

とても簡単ですよね!これだけで入力が簡素化され格段に使いやすくなります。
最近ではEFO(エントリーフォーム最適化)などお問い合わせフォームの途中離脱を抑えるために、
色々な事を導入しますが、入力の手間は少なくするのも、その一つですね。
EFOに関しての施策は他にも色々あるので、また紹介していきたいと思います。