PAGETOP

郵便番号から住所を入力させる国産jQueryプラグイン「jQuery.jpostal.js」

2015年9月18日

郵便番号から住所を入力させる国産jQueryプラグイン「jQuery.jpostal.js」

フォームによくある、郵便番号を入力するだけで、住所が自動補完されるシステムをカンタンに実装できる国産のjQueryプラグイン「jQuery.jpostal.js」をご紹介します

サンプル

上記のページを見ていただくと分かりますが、郵便番号が3桁と4桁に分かれて入力するタイプ、一つのinputに入力するタイプ、ボタンをクリックするタイプの3種類があります。

設定してもらうとなると料金がかかりますが、ソース自体はMitLicenseです。
googlecodeから直接読み込むことができて、お手軽です。
ダウンロードして自社サーバーにアップしたい、という方は下記からできます
https://code.google.com/p/jpostal/

1.ファイルの読み込み

<head>内で、jQuery本体とプラグインを読み込みます。

[HTML]

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

2.入力フォームを作る

htmlでフォームを作ります。
前述した通り、インプット部分は1つでも、3桁4桁に分かれてもどちらでもOKです。
下の例は、上記のサンプル1と同じタイプです。

ポイントは1つ。
郵便番号と都道府県、住所のinputタグに、それぞれ固有のidを付ける
ということです。

ここでは、
郵便番号の上3桁:postcode1
郵便番号の下4桁:postcode2
都道府県:address1
住所:address2
としています。

例えば、郵便番号を1つのinputにまとめたいのであれば、idも”postcode”や”address”など、一つになります。

[HTML](<head>内)

<form>
郵便番号:<input id="postcode1" maxlength="3" name="postcode1" size="3" type="text" />-<input id="postcode2" maxlength="4" name="postcode2" size="4" type="text" />
<br>
都道府県:
<select id="address1" name="address1"><option selected="selected" 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><option value="沖縄県">沖縄県 </option></select>
<br>
住所:<input id="address1_2" name="address2" size="50" type="text" />
</form>
番地:<input type="text" id="address3" name="lastaddress">

3.実行コードを記述する

先ほど付与したidに対し、スクリプトを実行するコードを記述します。

[Script]

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

見慣れない文字列が出てきましたが、これは以下のような意味を持っています。
%3…都道府県
%4…市区町村
%5…町名
つまり、address1には都道府県を、address2には市区町村と町名を代入するという意味になります。
また、最初のセレクタ指定部分には、1番目のセレクタのみを指定すればOKです。

例:$(‘#postcode1_).jpostal({

また、次のようなフォーマットも用意されています。
%6…大口事業所の番地
%7…大口事業所の名称

それぞれ、idと対応させるので、郵便番号と住所をそれぞれ1つの入力欄にするのであれば、
郵便番号のid:postcode
住所のid:address

となり、
引数は次のようになります。

[Script]

postcode : [
‘#postcode’,
],
address : {
‘#address’  : ‘%3%4%5’
}

4.確認はサーバーにアップしてから

郵便番号データはサーバーに格納されます。
googlecoeから読み込む場合も、ダウンロードしたスクリプトを使う場合も、サーバーにアップしないと動作確認はできません。
ちなみに、ローカルにjpostal.jsをダウンロードした場合は、JSONをサーバーにアップする必要があります。

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

コードが非常に簡単なので、カスタマイズもしやすいのではないでしょうか。
住所を手入力にしているなら、ぜひ一度試してみてください。