郵便番号を入れると自動で住所が補完されるjQuery
更新日：2021年11月7日
お問い合わせフォームや会員登録画面等でユーザーに郵便番号を入れてもらうケースがありますが、その際に自動で住所を補完してくれるjQueryプラグインのご紹介です。
自作しようとするとても大変なものも、jQueryプラグインを使えばさくっと実装出来ちゃうのがjQueryのいいところですね。本家のサイトはこちらになります。
ステップはたったの2つだけ。jQueryファイルの読み込みとhtmlソースコードの設置をするだけで実装出来ちゃいます。
それではステップ1のjQueryファイルの読み込みです。下記のソースコードをコピペして貼り付けます。
1 | <script src="https://ajaxzip3.github.io/ajaxzip3.js"></script> |
次にhtmlソースコードの設置です。下記のソースコードをコピペして貼り付けます。
1 | <input type="text" name="zip" onkeyup="AjaxZip3.zip2addr(this,'','address','address');"> |
2 | <input type="text" name="address"> |
たったこれだけで実装完了出来ちゃいました。
補足としてはinputのzipという名前がついている入力欄に郵便番号をハイフンなしで入力します。
するとinputのaddressという名前がついている入力欄に住所が補完されます。
いかがでしょうか。郵便番号での住所補完はユーザビリティの向上に繋がり、直帰率を下げる効果もあります。
最近よく言われるEFO（入力フォーム最適化）にもなりますね。
一度お試し下さい！
