jQueryで郵便番号から住所を自動入力させる方法【現役エンジニアが解説】

PROGRAM

今回は、jQueryで郵便番号から住所を自動入力させる方法について、簡単に解説していきます。

プラグインの読み込み

jQueryにはjquery.jpostal.jsというプラグインがあります。

これを使うことで、郵便番号から住所を自動入力させられます。

<script src="https://jpostal-1006.appspot.com/jquery.jpostal.js"></script>

使うためには、上記のように、このプラグインをscriptタグで読み込みます。

HTML

HTMLのサンプルを以下に示します。

<p>郵便番号:<input type="text" name="post_code" id="post_code" ></p>
<p>都道府県:<input type="text" name="prefecture" id="prefecture"></p>
<p>住所1:<input type="text" name="address_1" id="address_1"></p>
<p>住所2:<input type="text" name="address_2" id="address_2"></p>

郵便番号と住所のinput要素を配置するだけです。

ここでは郵便番号の入力欄を1つ、都道府県と住所1(市区町村)、住所2(町域)の3つの入力欄を配置しています。

jQuery

以下にjQueryのサンプルを示します。

$(window).ready( function() {
  $('#post_code').jpostal({
    postcode : [
      '#post_code'
    ],
    address : {
      '#prefecture'  : '%3',
      '#address_1'  : '%4',
      '#address_2'  : '%5'
    }
  });
});

上記のように、郵便番号用のinput要素にjpostalメソッドを実行します。

jpostalメソッドの引数には、郵便番号と住所項目をどのinput要素に紐づけるかを設定したオブジェクトを指定します。