郵便番号から住所を自動で入力！ajaxzip3の使い方！

今回は郵便番号を入力しただけで住所を自動で入力してくれるライブラリ「ajaxzip3」の使い方を解説します。

ajaxzip3を読み込む
ajaxzip3の使い方
まとめ

ajaxzip3を読み込む

まずはajaxzip3を読み込みましょう。URLで読み込むなら以下をコピペでokです。

<script src="https://ajaxzip3.github.io/ajaxzip3.js"></script>

ローカルで読み込むならgithub上に公開されているのでダウンロードしてきましょう（緑のcodeボタンをクリックしてDownload zipをクリックです）。

＞＞ajaxzip3/ajaxzip3.github.io

ajaxzip3の使い方

ajaxzip3の基本的な書式は以下のとおりです。

// 郵便番号の入力欄を2つに分ける場合
AjaxZip3.zip2addr( '〒上3桁', '〒下4桁', '都道府県', '市区町村', '町域大字', '丁目番地' );
//郵便番号の入力欄を1つにする場合
AjaxZip3.zip2addr( '〒7桁', '', '都道府県', '市区町村', '町域大字', '丁目番地' );

各引数には<input>のname属性を入れます。するとそのname属性の入力欄に自動で住所が入ります。

5つ目の引数の「町域文字」以降は省略できます。「市町村区」まではname属性を指定する必要があります。

また郵便番号は自分で入力するので、引数の郵便番号の部分はthisを指定する場合がほとんどです。thisはこの入力欄（郵便番号の入力欄）みたいな意味ですね。

まあ実際の使用例を見てもらうのが一番早いと思うのでいくつかサンプルを見てみましょう。

住所が1つの入力欄の場合

See the Pen
Untitled by wagashi000327 (@wagashi000327)
on CodePen.

<div>
  <div>
    <span>郵便番号：</span>
    <input type="text" name="postal" onKeyUp="AjaxZip3.zip2addr(this, '', 'address', 'address');">
  </div>
  <div>
    <span>住所</span>
    <input type="text" name="address">
  </div>
</div>

郵便番号の入力欄に番号を入力すると住所の欄に自動で住所が入ります。

ajaxzip3は郵便番号の<input>タグにonKeyUp="Ajaxzip3..."という感じで指定します。JS側に分けて書いてもいいけどHTMLに直接指定するのが普通っぽいです。

郵便番号の入力欄が1つの場合は第一引数（〒上3桁）はthis、第二引数（〒上4桁）はないので空にします。

またこのサンプルでは都道府県と市区町村を分けていないので、第三引数（都道府県）と第四引数（市区町村）は同じname属性（address）を指定します。（第四引数まではname属性を渡す必要があります）。

なお、郵便番号にはハイフンが入っても入らなくても同じように処理できます。めっちゃ便利ですね。

住所を都道府県と市区町村で分ける場合

See the Pen
Untitled by wagashi000327 (@wagashi000327)
on CodePen.

<div>
  <div>
    <span>郵便番号：</span>
    <input type="text" name="postal" onKeyUp="AjaxZip3.zip2addr(this, '', 'prefecture', 'city');">
  </div>
  <div>
    <span>都道府県</span>
    <input type="text" name="prefecture">
  </div>
  <div>
    <span>市区町村</span>
    <input type="text" name="city">
  </div>  
</div>

都道府県と市区町村で入力欄を分ける場合、第三引数（都道府県）に都道府県のname属性、第四引数（市区町村）に市区町村のname属性を渡します。

他の部分は同じように第一引数はthis、第二引数はないので空です。

郵便番号の入力欄が2つに別れている場合

See the Pen
Untitled by wagashi000327 (@wagashi000327)
on CodePen.

<div>
  <div>
    <span>郵便番号：</span>
    <input type="text" name="postal1">
    -
    <input type="text" name="postal2" onKeyUp="AjaxZip3.zip2addr('postal1', 'postal2', 'prefecture', 'city');">
  </div>
  <div>
    <span>都道府県</span>
    <input type="text" name="prefecture">
  </div>
  <div>
    <span>市区町村</span>
    <input type="text" name="city">
  </div>  
</div>

郵便番号の入力欄が2つに別れている場合はAjaxZip3.zip2addr()を2つ目の郵便番号の入力欄に指定します。

他は同じように

第一引数（〒上3桁）は上3桁のname属性
第二引数（〒上4桁）は〒下4桁のname属性（ここはこの場合thisでもok）
第三引数（都道府県）は都道府県のname属性
第四引数（市区町村）は市区町村のname属性

を渡せばokです。

ボタンクリックで住所を自動で入力する

場合によっては郵便番号の入力が終わったあと「住所を自動入力」ボタンを押したタイミングで自動入力したいときもあると思います。そんな時はボタンクリックでajaxzip3を発火させます。

See the Pen
Untitled by wagashi000327 (@wagashi000327)
on CodePen.

<div>
  <div>
    <span>郵便番号：</span>
    <input type="text" name="postal1">
    -
    <input type="text" name="postal2">
  </div>
  <br>
  <div>
    <button type="button" onclick="AjaxZip3.zip2addr('postal1', 'postal2', 'prefecture', 'city');">住所を自動入力</button>
  </div>
  <br>
  <div>
    <span>都道府県</span>
    <input type="text" name="prefecture">
  </div>
  <div>
    <span>市区町村</span>
    <input type="text" name="city">
  </div>  
</div>

<button onclick="AjaxZip3.zip2addr('postal1', 'postal2', 'prefecture', 'city');">の部分ですね。

ボタンにonclickを指定して、クリック時にajaxzip3が発火するようにします。

渡す引数はやはり今までと同じで、各入力欄のname属性を渡せばokです。

セレクトボックスでも自動で入力する

都道府県はセレクトボックスで選択させることもありますが、ajaxzip3はセレクトボックスでもいけちゃいます。

See the Pen
Untitled by wagashi000327 (@wagashi000327)
on CodePen.

<div>
  <div>
    <span>郵便番号：</span>
    <input type="text" name="postal1">
    -
    <input type="text" name="postal2" onKeyUp="AjaxZip3.zip2addr('postal1', 'postal2', 'prefecture', 'city');">
  </div>
  <div>
    <span>都道府県</span>
    <select name="prefecture">
      <option hidden>選択してください</option>
      <option value="北海道">北海道</option>
      <!-- 省略 -->
      <option value="沖縄県">沖縄県</option>
    </select>
  </div>

  <div>
    <span>市区町村</span>
    <input type="text" name="city">
  </div>  
</div>

都道府県がセレクトボックスになっても、第三引数（都道府県）に<select>のname属性を入れるだけです。