jPostalで郵便番号7桁入力時に住所自動入力を反映させる

この記事の趣旨

jPostalで郵便番号を「7桁」入力した際に住所自動入力を反映させる方法について記載します。

jPostalの通常の自動入力動作について

通常は、郵便番号先頭3桁以上入力時に該当の住所が存在した場合は、都度判定され補完されます。

jPostalの clickオプションについて

公式ドキュメントには明記されていませんが、jPostal のソースコード内には「click」というキーで要素を指定し、その要素をクリックした際に main() （住所検索）を実行する実装が含まれています。
GitHubリポジトリの jquery.jpostal.js #L802 あたりを読むと、下記のような記述があります。

jquery.jpostal.js #L802

if ( typeof this.sc.click !== 'undefined' && this.sc.click !== '' ) {
    $(this.sc.click).on('click.jpostal', function(){
        _this.main();
    });
}

これは「this.sc.click（設定オブジェクトの click プロパティ）」が指定されていれば、その要素に対して click.jpostal イベントをバインドし、クリック時に main() を呼ぶ」という仕組みです。

これを利用して、郵便番号7桁入力時に住所自動入力を反映させるようにします。

郵便番号7桁入力時に住所自動入力を反映させる実装例

// 郵便番号入力欄
<input type="input" id="postcode" name="postcode">

// 住所反映欄
<input type="text" id="prefecture" name="prefecture" value="">
<input type="text" id="city" name="city" value="">
<input type="text" id="street_building" name="street_building" value="">

// jpostal click動作用のinputタグ
<input type="hidden" id="postcode_search">

// jpostal設定
$('#postcode').jpostal({
    click: '#postcode_search',  // ← これが「clickオプション」
    postcode : [
        '#postcode'
    ],
    address : {
        '#prefecture' : '%3',
        '#city' : '%4',
        '#street_building' : '%5',
    }
});

// 郵便番号入力欄に対するキーイベント
$('[name="postcode"]').on('keyup blur compositionstart compositionend', function (event) {

    // 7桁入力時に、上記で指定した #postcode_search をtrigger('click') する
    if ($(this).val().length === 7) {
        $('#postcode_search').trigger('click');
    } else {
         // 7桁未満であれば住所欄をクリアする
        $('#prefecture').val('');
        $('#city').val('');
        $('#street_building').val('');
    }
});

仕組み

jPostalに click: '#postcode_search' を指定

これにより、jPostal は「#postcode_search がクリックされると main()（住所検索）を行う」という動きを内部的にセットします。
郵便番号を入力して7桁に達したら #postcode_search 要素を click する

実際にはユーザーがボタンを押すのではなく、コードで $('#postcode_search').trigger('click') しています。
すると jPostal が反応して main() を呼び、住所を補完します。
7桁未満の場合は住所欄をクリア

これにより「7桁でないときは補完しない」仕様を実現。

まとめ

• jPostal のソースには「click オプション」を扱うコードが存在し、指定したセレクタ要素をクリックすることで main()（住所検索）をトリガーできます。
• 「click オプション」は公式ドキュメントには詳説されていません。
• 「click オプション」を利用し、7桁になったら trigger('click') することで、自動入力のタイミングを自由に制御できます。