■まずは動作の確認です。
→郵番欄に 1010021 と入力してみよう。
[動作手順のポイント]
■事前準備
→<head>~</head>に次の1行を追加。
<script src="https://zipaddr.github.io/zipaddrx.js" charset="UTF-8"></script> (どのようなhtmlでも適用可能でしょう)
※EC-CUBE、Wordpressは、Pluginを!
■動作手順
0)最初にzipaddrx.jsが読み込まれる。
→この時に動作環境を設定する。
→これで郵番欄のコントロールが可能。
1)郵番の入力文字数が7桁になるのを待つ。
→郵番の区切り文字 '-' はカウントしない。
※htmlに最大6箇所の入力欄が設置できる。
2)郵番が7桁になるとサーバへ検索依頼。
→依頼先は考え方によって3通りあります。
(郵番簿が自社内、有償版、商用版)
→1箇所管理で利用するのが当方の考え。
→クロスドメイン通信で何処でも利用可。
→データは圧縮・復元でネット負荷低減。
3)検索結果(jsonp)による処理
→0件の場合はアンマッチ画面を出力。
→1件の場合は情報をセットして、5)へ
4)結果が2件以上はガイダンス画面生成。
→対象行をクリックで選択が確定し5)へ
※番号が同じで住所が違っても対応可能。
(特殊ケースの例:438-0078)
5)html内の各欄にデータを埋め込む。
→id名を合わせるのはこの為。
→都道府県~欄なしはキャリーオーバー。
6)Ver7.60以降は番地まで自動入力が可能。
→郵番欄に「m」又は「+」と入力する。
→位置情報の利用を許可する。
→MAPから位置をclickして場所を確定。
→以降は通常と同じです。