AjaxZip2の使い方 AjaxZip2

AjaxZip2の使用方法をご紹介しています。
AjaxZip2はフォームで郵便番号から住所を自動入力が可能なJavaScriptライブラリです。
prototypeとjQueryの両方に対応しています。

公式サイト

デモ

郵便番号のエリアを2つにした場合のデモです。

郵便番号 -
住所

ダウンロードと設置

こちらからダウンロードして解凍します。
解凍後、ajaxzip2ディレクトリを任意の場所に設置します。
なお、異なる階層で共通して使用できませんのでご注意ください。
ただし、dataディレクトリ(郵便番号データ)のみ共通で使用可能です。
設定方法はこちらをご覧ください。

JavaScriptの読み込み

以下のタグを<head>内に記述します。
パスは環境により変更してください。

jQueryを利用したい場合は、prototype.jsjquery.jsに置き換えてください。

dataディレクトリのみ共通して使用する場合

dataディレクトリのみ共通して使用する場合は以下のタグを<head>内に追記します。

HTML設定

郵便番号のinput要素にonKeyUpを記述します。
基本的な設定は、onKeyUp="AjaxZip2.zip2addr(郵便番号(全てまたは上3桁),都道府県,市区町村,郵便番号(下4桁),丁目番地,町域大字);となり、それぞれname属性を記述します。
また、郵便番号(下4桁)以降は省略が可能です。
(都道府県がプルダウンメニュー場合でも可能です。)

郵便番号・住所が1エリアの場合(ハイフンの有無どちらも機能します。)

郵便番号
住所

郵便番号が2エリア、住所が1エリアの場合

郵便番号 -
住所

郵便番号が2エリア、住所が2エリアの場合

郵便番号 -
都道府県
市区町村番地など

郵便番号が2エリア、住所が2エリアの場合(プルダウンメニュー)
※ 都道府県のプルダウンは都道府県名または都道府県番号(都道府県コード)に対応しています。

郵便番号 -
都道府県
市区町村番地など

都道府県のプルダウンが都道府県番号(都道府県コード)の場合:

郵便番号 -
都道府県
市区町村番地など