郵便番号からの住所入力補助
投稿日: 2010-05-17 /
カテゴリー:job
Kawa.net
http://www.kawa.net/works/ajax/ajaxzip2/ajaxzip2.html
「AjaxZip2 の導入手順」を見てやればオッケーでした。
郵便番号データはちょびちょびと更新されるので、入替方法も。
日本郵便のサイトの「郵便番号検索」→「郵便番号データのダウンロード」からダウンロードします。
http://www.post.japanpost.jp/zipcode/
で、ダウンロードしたファイルを、以下のブログの方が変換ツールを作ってくださってるのでダウンロードします。で、ダウンロードしたphpプログラムを使ってjson形式に変換します。
子だぬきの技術習得ノート(2008年12月5日の記事)
http://www.okushin.co.jp/kodanuki_note/2008/12/ajax.html
できたjsonデータを「AjaxZip2」の「data」フォルダに配置すればオッケー。
個人的に、入力時に勝手に内容を書き換えられちゃうのが好きじゃないので、ボタンを押したら住所を書き換えるようにしました。
こんな感じで。(jsフォルダを作成し、その中にライブラリとjsonファイルを配置しました。)
head部に以下の内容を記述します。(ライブラリの読込とjsonファイルの場所指定。)
あ、「prototype.js」か「jquery.js」を使います。(AjaxZip2の中に一緒に含まれてるのでそれを使えばいいと思います。)
<script src="../js/prototype.js" type="text/javascript"></script> <script src="../js/ajaxzip2/ajaxzip2.js" type="text/javascript"></script> <script>AjaxZip2.JSONDATA = '../js/ajaxzip2/data';</script>
body部の適当な位置に以下のように記述します。
〒<input type="text" value="" name="zipcode1" id="zipcode1" />-<input type="text" value="" name="zipcode2" id="zipcode2" /> <input type="button" onclick="AjaxZip2.zip2addr('zipcode1', 'ken', 'address1', 'zipcode2');" value="住所を検索" /><br /> <select name="ken" id="ken"> <option label="" value="00"></option> <option label="北海道" value="01">北海道</option> (中略) </select> <input type="text" value="" name="address1" id="address1" /><br /> <input type="text" value="" name="address2" id="address2" /><br />
配置して丸コピーしたらすぐ動くものが好きです。
ありがとうございます。ありがとうございます。