Javascriptで郵便番号検索する

どうもこんにちは。必死で北斗星のはんだ付けを急いでしているchiko ryoです。

今回はよく通販サイトなどで見かける、「郵便番号で住所検索」についてです。

<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
<form>
郵便番号:
<input type="text" name="number1" size="4" maxlength="3"> － <input type="text" name="number2" size="5" maxlength="4"
onKeyUp="AjaxZip3.zip2addr('number1','number2','ken','shi','after');"><br>
都道府県: <input type="text" name="ken" size="40"><br>
市町村区: <input type="text" name="shi" size="40"><br>
以降の住所: <input type="text" name="after" size="40">
</form>

以上です。簡単ですね。

今回目新しいのはこれでしょうか。
onKeyUp="AjaxZip3.zip2addr('number1','number2','ken','shi','after');"

1行目で読み込んだライブラリで定義されている関数です。

書式は以下になります。

AjaxZip2.zip2addr( '〒上3桁', '〒下4桁', '都道府県', '市区町村', '町域大字', '丁目番地' );

引数にはinputタグのname属性を指定します。<form>タグのname属性は不要です。

今回はテキストフォームを使用していますが工夫次第でinnerHTMLなども使用可能です。

郵便番号のデータですが、常にデータベースは更新されるため、設置や管理も大変楽です。

実行例

郵便番号: －
都道府県:
市町村区:
以降の住所: