「住所の一部」から「郵便番号と全住所」の入力補完（オートコンプリート）および他の入力フィールドへの自動入力を行いたい

Question

顧客情報（住所や郵便番号）の入力画面を作成しています。

下記のような入力支援用のテーブル（または配列データ）を作成し、
「営業地域名」の入力補完（オートコンプリート）と、選択に応じて
該当する地域コード、郵便番号、住所の自動入力を行いたいです。

検索してみたところ、郵便番号から住所を自動入力するものは
たくさんお手本があったのですが、本件に使えそうなものは、
私では見つけられず、困っています。

お詳しい方、アドバイスをいただけないでしょうか？
よろしくお願いします。

<div class="container">
    <form>
        <div class="form-group">
            <label>営業地域名</label>
            <input type="text" name="area_name" class="form-control">
        </div>
        <!-- 地域コード-->
        <input type="hidden" name="area_code" >
        <div class="form-group">
            <label>郵便番号</label>
            <input type="text" name="zipcode" class="form-control">
        </div>
        <div class="form-group">
            <label>住所</label>
            <input type="text" name="address" class="form-control">
        </div>
        <button type="submit">登録</button>
    </form>
</div>

Answer 1

入力補完は下記ライブラリでしょうか。

入力補完ライブラリsuggest.js
http://www.enjoyxstudy.com/javascript/suggest/

引用テキスト対象データを外部JSとして読み込んだ場合のサンプル

を使うことを前提に、予めテーブルから営業地域名・郵便番号・住所の配列が記述された
JSファイルを生成しておき、入力イベント元を判別して分岐処理する…
というような感じで作ることになると思います。

Comments

[maifukuhara]

ご回答ありがとうございます。
教えていただいたライブラリを試しているのですが、
「suggest.js 」は、「営業地域名」のみを自動補完することはできそうですが、
同時に複数のフィールド（郵便番号や住所）を自動入力できないようです。

または、営業地域名の補完だけをsuggest.js で行い、
郵便番号と住所の自動入力は別のスクリプトを使う、という意味でしょうか？

[yuki84web]

ごめんなさい、それぞれのフォームで補完入力したいものとかと勘違いしていました。
入力補完後、それを検知して他のフィールドに値を入れることになると思います。

もう１つ使えそうなものがありました。
http://qiita.com/takeyama/items/f6e0fbac4d3b4907193e
AngularJSを使ったものですが、こちらは入力補完後のイベントを書ける部分が用意されています。

[maifukuhara]

こちらこそ、わかりにくい説明ですみません。
ご紹介いただいたもう一つの方法、
AngularJSが初めてなので不安ですが、
これから勉強しながら試してみます。ありがとうございました。