「ajaxzip3」を使って簡単に郵便番号から住所を検索する

登録・エントリーフォームなどでよくみかける「住所検索」ボタン、実際に実装する機会があったので、ライブラリ「ajaxzip3」を試してみました。

ajaxzip3/ajaxzip3.github.io · GitHub

結果から申し上げると、非常に簡単に導入することができました。
「世界一、簡単に設置できる郵便番号検索を目指して！」のキャッチコピーもすばらしいですね。

導入例

まず、住所検索を実装するページに上記ライブラリを読み込みます。

<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>

次に、例えば、以下のようなフォームを想定します。

<input type="text" name="input1"> - <input type="text" name="input2" onKeyUp="AjaxZip3.zip2addr('input1','input2','output1','output2','output3');">
<input type="text" name="output1">
<input type="text" name="output2">
<input type="text" name="output3">

「AjaxZip3.zip2addr」を実行することにより、input1とinput2に入力した値を読み取って、output1、output2、output3に検索結果の住所をセットします。

デモ

上のコードのデモンストレーションです。

しくみが非常にシンプルなので、このようにブログの1ページにも容易に設置可能です。

カスタマイズ

本サイトのドキュメントにあるように入力エリアを7桁の1か所とすることもできますし、「AjaxZip3.zip2addr」をonclickに設置してあげればクリック時に実行することもできるなど、用途に合わせてカスタマイズ可能です。

また、試しにoutput1に47都道府県のプルダウンを用意してみましたが、問題なくセットされました。

<select name="output1">
<option value="1">北海道</option>
<option value="2">青森県</option>
…
<option value="47">沖縄県</option>
</select>

柔軟性にも優れた非常にすばらしいライブラリだと思います。
今後さまざまな場面で重宝しそうです。