※ セキュリティポリシー上、localhost、IPアドレスからの利用はできません。
(0)事前準備
・御社html内の<head>~</head>間に次の1行を挿入します。
■<script src="https://zipaddr.github.io/zipaddr3.js" charset="UTF-8"></script>‥‥ これならどのようなhtmlにも適用可能でしょう!
・上記によってhtml起動時にzipaddr3.jsが読み込まれ、入力した郵便番号の内容をコントロールすることが可能となります。
※もし性能が気になるようでしたら、上記モジュールを御社のサーバ内に設置して下さい。
(しかし機能拡張等Ver-UPに対応できませんので非推奨です)
・デザインcssは、https://zipaddr2.com/css/zipaddr.cssをお使い下さい。
・逆検索をする場合は、<script src="https://zipaddr.github.io/zipaddrr3.js" charset="UTF-8"></script> を追加して下さい。
(1)jsモジュール起動時の処理
・有償版なので、契約情報を確認します。
・オウンコーディングの定義(zipaddr_own)がある場合は、その処理を行ないます。
・html内容を確認してid名が未定義の場合は、自動設定を行ないます。 ‥‥ htmlの修正をできる限り少なくする為。
<input type="text" name="zip" [id="zip" この部分] ... >
・郵便番号欄に imeMode="disabled" を設定します。 ‥‥ ブラウザによって英数字入力モードになります。
・入力欄のtypeをtelにします(スマホの場合は入力が便利)
・placeholderの設定がない場合は、「住所自動入力」と設定します。
・郵便番号入力時のデータ編集。
>郵便番号の区切り文字 '-' は、文字数のカウントに加えず無視します。
>全角文字は半角に変換します。
>スペースはカットします。
・郵便番号の入力文字数が4桁以上になるまで待ちます。
(2)郵便番号欄が3桁-4桁の場合
・3桁入力すると、4桁欄へフォーカスが移動します。
(3)郵便番号入力文字が4桁以上の場合
・https://zipaddr2.com/ に郵便番号DBデータの検索を要求します。
※当方の考えは、共通なものは1箇所で管理してクラウド利用する(重複運用のムダをなくす)ということです。
(4)検索結果のreturn情報(jsonp)を受信する。
・最初に受信データの復元処理を行ないます。
※データの授受では圧縮・復元を行なってネットワークの負荷を低減しています。
(5)検索結果のreturn情報(jsonp)が1件(全桁入力済み)の場合は(8)へ
(6)return情報が2件以上の場合は、ガイダンス画面を生成します。
・ガイダンス画面の対象行をクリックすると、(8)へ
※ガイダンスの表示によって郵便番号が同じで住所が違うような特殊ケース(例:438-0078)にも対応可能となっています。
(7)ガイダンス画面の機能
・空欄部分をドラッグ&ドロップで画面を移動することができます。
・対象行をクリックすると郵便番号全桁入力と同じ動作となります。
・検索した総件数を明示しています。
・[閉じる]でガイダンス画面が消えます。
・システムのバージョン情報を表示しています。
(8)郵便番号、都道府県、市区町村、町域名、データをhtml内のそれぞれ位置に埋め込みます。
※id名を合わせる(又は定義する)のは、ここで必要となるからです。
・定義に従って郵便番号に '-' を付加します。
・都道府県~町域名はセットする時にデータがキャリーオーバーされます。
例えば、htmlに町域名(addr)のみの定義であれば「東京都千代田区外神田」のように1つの欄にセットされます。
・都道府県欄はselect文ですが、色々な定義パターンを自動認識しています。
>キー部が1桁(1:北海道)
>キー部が2桁(01:北海道)
>キー部に名称が入る(北海道)
>select文をグループ化する(<optgroup label="北海道・東北">.... )
・都道府県欄はtext文でも可能です。
以上。