ajaxzip3は、フォーム内の郵便番号を入力すると、自動で住所を補完してくれるJavaScriptのライブラリです。
郵便番号を入れるとリアルタイムで住所が入力されます。
ajaxzip3の使い方
ajaxzip3の設置と読み込み
GitHubからファイル一式をダウンロードし、ajaxzip3.jsをサーバーに設置します。設置したajaxzip3.jsを</body>の直前、もしくは<head>～</head>で読み込みましょう。
<script src="js/ajaxzip3.js"></script>自サーバーに設置するのではなく、公開されているスクリプトを読み込む場合は以下のようにします。
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>フォームのマークアップ
スクリプトを読み込んだら、フォームをマークアップします。色んなパターンで実装可能なので、実際にありそうなケースをまとめてみました。
1つのinputで郵便番号7桁を入力させる場合
<input type="text" name="zip01" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','pref01','addr01');">
<input type="text" name="pref01" size="20">
<input type="text" name="addr01" size="60">onKeyUp属性のpref01で都道府県、addr01で市区町村のinputを指定しています。name属性を合わせてあげます。
郵便番号7桁 + 住所欄を分けない場合
<input type="text" name="zip11" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');">
<input type="text" name="addr11" size="60">住所欄を分けない場合は、onKeyUpの第3・4引数を同じname属性で指定します。
郵便番号を3桁と4桁に分ける場合
<input type="text" name="zip21" size="4" maxlength="3"> － <input type="text" name="zip22" size="5" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip21','zip22','addr','addr');">
<input type="text" name="addr" size="60">郵便番号2枠 + 住所欄も分ける場合
<input type="text" name="zip21" size="4" maxlength="3"> － <input type="text" name="zip22" size="5" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip21','zip22','pref01','addr01');">
<input type="text" name="pref01" size="20">
<input type="text" name="addr01" size="60">都道府県だけセレクトボックスの場合
都道府県をセレクトボックスにすることも可能です。セレクトボックスには47都道府県すべてを入れてください。
<input type="text" name="zip21" size="4" maxlength="3"> － <input type="text" name="zip22" size="5" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip21','zip22','pref01','addr01');">
<select name="pref01">
<option value="">-- 都道府県 --</option>
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
・
・
・
</select>
<input type="text" name="addr01" size="60">都道府県の選択はoption要素のvalueで判断されます。上記のように”北海道”や”青森県”といったように都道府県名で指定しても良いですし、都道府県コードで指定しても機能します。
<input type="text" name="zip21" size="4" maxlength="3"> － <input type="text" name="zip22" size="5" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip21','zip22','pref01','addr01');">
<select name="pref01">
<option value="">-- 都道府県 --</option>
<option value="01">北海道</option>
<option value="02">青森県</option>
<option value="03">岩手県</option>
・
・
・
</select>
<input type="text" name="addr01" size="60">あとがき
色んなパターンで実装できて便利ですね。非常に使いやすいライブラリです。
ほぼどんなデザインでも対応できるのではないでしょうか。