住所自動入力の仕様

■まずは動作の確認です。
 →郵番欄に 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)拡張性が高い
等、日本語版で一位なら、
世界一のシステムだと考えています。

▲ページの先頭へ