リアルタイムで郵便番号から住所を自動入力してくれるJavaScriptライブラリ「ajaxzip3」

リアルタイムで郵便番号から住所を自動入力してくれるJavaScriptライブラリ「ajaxzip3」

リアルタイムで郵便番号から住所を自動入力してくれるJavaScriptライブラリ「ajaxzip3」

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">

あとがき

色んなパターンで実装できて便利ですね。非常に使いやすいライブラリです。

ほぼどんなデザインでも対応できるのではないでしょうか。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です