「当サイトは郵便番号から住所を自動入力する有償版のサイトです。」
By ピエールソフト 2013.1.9
御社のhtmlに1行追加するだけで、住所入力を自動化することができます、その仕掛けとは!


 住所の自動入力のデモ 
郵便番号  「1010」と入力してみましょう。
住所【自動住所入力】

ZipAddr3.js (有料) 郵便番号 → 住所自動入力の動作手順

【動作の手順&ポイント】

0)事前準備
 ・御社html内の<head>~</head>間に次の1行を挿入します。
  ■<script src="zipaddr2.googlecode.com/svn/trunk/zipaddr3.js" charset="UTF-8"></script>‥‥ これならどのようなhtmlにも適用可能でしょう!
 ・上記によってhtml起動時にzipaddr3.jsが読み込まれ、入力した郵便番号の内容をコントロールすることが可能となります。
  ※もし性能が気になるようでしたら、上記モジュールを御社のサーバ内に設置して下さい。
  (しかし機能拡張等Ver-UPに対応できませんので非推奨です)

 ・デザインcssは、<link rel="stylesheet" href="css/zipaddr.css" /> をお使い下さい。
 ・逆検索をする場合は、<script src="https://zipaddr2.googlecode.com/svn/trunk/zipaddrr3.js" charset="UTF-8"></script> を追加して下さい。

1)zipaddr3.js起動時の処理
 ・オウンコーディングの定義(zipaddr_own)がある場合は、その処理を行ないます。
 ・html内容を確認してid名が未定義の場合は、自動設定を行ないます。 ‥‥ htmlの修正をできる限り少なくする為。
   <input type="text" name="zip" [id="zip" この部分] ... >
 ・郵便番号欄に imeMode="disabled" を設定します。 ‥‥ ブラウザによって英数字入力モードになります。
 ・郵便番号入力時のデータ編集。
   >郵便番号の区切り文字 '-' は、文字数のカウントに加えず無視します。
   >全角文字は半角に変換します。
   >スペースはカットします。
 ・郵便番号の入力文字数が4桁以上になるまで待ちます。


2)郵便番号入力文字が4桁以上になると、http://zipaddr2.com/ に郵便番号DBデータの検索を要求します。
 ※当方の考えは、共通なものは1箇所で管理してクラウド利用する(重複運用のムダをなくす)ということです。
 ※データの授受では圧縮・復元を行なってネットワーク負荷を低減しています。

3)検索結果のreturn情報(jsonp)が1件(全桁入力済み)の場合は情報をセットして、6)へ

4)return情報が2件以上の場合は、ガイダンス画面を生成します。
 ・ガイダンス画面の対象行をクリックすると、6)へ
 ※ガイダンスの表示によって郵便番号が同じでも住所が違うような特殊ケース(例:438-0078)にも対応可能となっています。

5)ガイダンス画面の機能
 ・対象行クリックすると郵便番号全桁入力と同じ動作となります。
 ・検索した総件数を明示しています。
 ・ガイダンス画面の頁送りができます。(次頁、前頁、頁指定)
 ・[閉じる]でガイダンス画面が消えます。
 ・空欄部分をドラッグしてガイダンス画面を一時的に移動することができます。
 ・zipaddr3.jsのバージョン番号を表示しています。


6)郵便番号、都道府県、市区町村、町域名、データをhtml内のそれぞれ位置に埋め込みます。
 ※id名を合わせる(又は定義する)のは、ここで必要となるからです。
 ・最初に受信データの復元処理を行ないます。
 ・定義に従って郵便番号に '-' を付加します。
 ・都道府県~町域名はセットする時にデータがキャリーオーバーされます。
   例えば、htmlに町域名(addr)のみの定義であれば「東京都千代田区外神田」のように1つの欄にセットされます。
 ・都道府県欄はselect文ですが、色々な定義パターンを自動認識しています。
   >キー部が1桁(1:北海道)
   >キー部が2桁(01:北海道)
   >キー部に名称が入る(北海道)
   >select文をグループ化する(<optgroup label="北海道・東北">.... )

以上。

▲ページの先頭へ