弊社で日頃からお世話になっているライブラリーといえば、
ajaxzip2です！！
フォームのテキストボックスに郵便番号を入力すると、
自動で都道府県以下の住所をテキストボックスに反映させてくれるものです。
ただ、
このライブラリって大量のJSONファイルをサーバー上にアップする必要がありました。
が！！！
いつの間にかajaxzip3というものが出ていました。
ajaxzip2の場合には、
前述の大量のJSONファイルアップロードに加え、
以下の3行を追加する必要がありました
==========================================================
<script src="../js/ajaxzip2/prototype.js"></script>
<script src="../js/ajaxzip2/ajaxzip2.js" charset="UTF-8"></script>
<script>AjaxZip2.JSONDATA = '../js/ajaxzip2/data';</script>
==========================================================
しかし、
ajaxzip3からは以下の1行を追加するだけで実装できるようになりました。
<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>
しかも、
以下のURLに変更すればSSLにも対応できます。
https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js
お問合わせフォームなどの作成の際には、
セキュリティー上SSLを設定することが多いので非常に助かります！！
コードの書き方も簡単で、
例えば、
郵便番号入力用テキストボックスを1つにし、
住所入力用テキストボックスを「都道府県」「市区町村」「町名以下」の3つ分けたい場合、
以下の様になります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajaxzip3</title>
<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>
</script>
</head>
<body>
〒郵便番号：<input type="text" name="zip" size="10" maxlength="8" onChange="AjaxZip3.zip2addr('zip','','pref','city',null,'chome');"><br><br>
都道府県：<input type="text" name="pref"><br>
市区町村：<input type="text" name="city"><br>
町名以下：<input type="text" name="chome"><br>
</body>
</html>
※詳しくはajaxzip3のサイトで確認してください。
http://code.google.com/p/ajaxzip3/
この記事へのコメントはありません。