■まずは動作の確認です。
→郵番欄に 438-0078 と入力してみよう。
[動作手順のポイント]
■事前準備
<head>~</head>間に次の1行を追加。
<script src="https://zipaddr.github.io/zipaddrx.js" charset="UTF-8"></script> ※この程度ならどのようなhtmlでも適用可能でしょう。
※EC-CUBE、Wordpressは、Pluginを!
■動作手順
1)最初にzipaddrx.jsが読み込まれる。
→この時に動作環境を設定する。
→これで郵番欄のコントロールが可能。
2)郵番の入力文字数が7桁になるのを待つ。
→郵番の区切り文字 '-' はカウントしない。
※htmlに最大6箇所の入力欄が設置できる。
3)郵番欄が3桁-4桁の場合は、
→3桁入力でフォーカスが4桁へ自動移動。
4)郵番が7桁になるとサーバへ検索依頼。
→データの一元管理が当方の考え。
→サーバは複数台で負荷分散しています。
→依頼先は考え方によって2通りあります。
(信頼性の高い有償版、商用版)
→クロスドメイン通信で何処でも利用可。
→データは圧縮・復元でネット負荷低減。
5)検索結果(jsonp)による処理
→0件の場合はアンマッチ画面を出力。
→1件の場合は情報をセットして、7)へ
6)結果が2件以上はガイダンス画面生成。
→対象行のクリックで選択が確定し7)へ
※番号が同じで住所が違っても対応可能。
(特殊ケースの例:438-0078)
7)html内の各欄にデータを埋め込む。
→id名を合わせるのはこの為。
→都道府県~欄なしはキャリーオーバー。
8)システムの拡張性。
→オウンコーディングで機能拡張が可能。
→他に多数のプラグインがあります。
※上記の特長を纏めると、
(1)導入が非常に簡単
(2)郵番/地域の複数対応が処理可能
(3)フォーム設計の自由度が高い
(4)対応システムが多い
(5)拡張性が高い
等、日本語版で一位なら、
世界一のシステムだと考えています。