YubinBango.jsを使った住所自動入力の実装方法

YubinBango.jsを使って、
郵便番号を入力したら自動的に都道府県以下を補完させる。

①下記のcdnを記述。

yubinbango.jsのcdn

<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>

②郵便番号、都道府県、市区町村の全てのブロックを囲んだブロックのclassにh-adrを記述。
formタグのclassに入れても良いし、

<form class="form h-adr">
　 　<div class="form-box">
     <label>名前</label>
     <input type="text">
  </div>
  　<div class="form-box">
     <label>郵便番号</label>
     <input type="text">
  </div>
  <div class="form-box">
     <label>都道府県</label>
     <select class="">
     　　　　<option value="">--</option>
     　　　　<option value="1">北海道</option>
     　　　　<option value="2">青森県</option>
     　　　　<option value="3">岩手県</option>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　<option value="45">宮崎県</option>
     　　　　<option value="46">鹿児島県</option>
     　　　　<option value="47">沖縄県</option>
     </select>
  </div>
  　<div class="form-box">
     <label>市区町村</label>
     <input type="text">
  </div>
</form>

formブロックの中で郵便番号、都道府県、市区町村のブロックを囲うブロックのclassにh-adrをつける感じでも良い。

<form class="form">
　 　<div class="form-box">
     <label>名前</label>
     <input type="text">
  </div>
  <div class="h-adr">
  　  <div class="form-box">
       <label>郵便番号</label>
       <input type="text">
    </div>
    <div class="form-box">
       <label>都道府県</label>
       <select class="">
     　　　　  <option value="">--</option>
     　　　　  <option value="1">北海道</option>
     　　　　  <option value="2">青森県</option>
     　　　　  <option value="3">岩手県</option>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　  　　　　　　・
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　  　　　　　　・　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　  　　　　　　　・
　　　　　　　　　　  　　　　<option value="45">宮崎県</option>
       　　　　<option value="46">鹿児島県</option>
       　　　　<option value="47">沖縄県</option>
       </select>
    </div>
  　  <div class="form-box">
       <label>市区町村</label>
       <input type="text">
    </div>
  </div>
</form>

③classにh-adrを記述したタグの次の行に下記を記載。

<span class="p-country-name" style="display:none;">Japan</span>

②のhtmlを例にすると、

<form class="form h-adr">
  <span class="p-country-name" style="display:none;">Japan</span>
　 　<div class="form-box">
     <label>名前</label>
     <input type="text">
  </div>
  　<div class="form-box">
     <label>郵便番号</label>
     <input type="text">
  </div>
  <div class="form-box">
     <label>都道府県</label>
     <select class="">
     　　　　<option value="">--</option>
     　　　　<option value="1">北海道</option>
     　　　　<option value="2">青森県</option>
     　　　　<option value="3">岩手県</option>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　<option value="45">宮崎県</option>
     　　　　<option value="46">鹿児島県</option>
     　　　　<option value="47">沖縄県</option>
     </select>
  </div>
  　<div class="form-box">
     <label>市区町村</label>
     <input type="text">
  </div>
</form>

もしくは、

<form class="form">
　 　<div class="form-box">
     <label>名前</label>
     <input type="text">
  </div>
  <div class="h-adr">
     <span class="p-country-name" style="display:none;">Japan</span>
  　  <div class="form-box">
       <label>郵便番号</label>
       <input type="text">
    </div>
    <div class="form-box">
       <label>都道府県</label>
       <select class="">
     　　　　  <option value="">--</option>
     　　　　  <option value="1">北海道</option>
     　　　　  <option value="2">青森県</option>
     　　　　  <option value="3">岩手県</option>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　  　　　　　　・
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　  　　　　　　・　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　  　　　　　　　・
　　　　　　　　　　  　　　　<option value="45">宮崎県</option>
       　　　　<option value="46">鹿児島県</option>
       　　　　<option value="47">沖縄県</option>
       </select>
    </div>
    <div class="form-box">
       <label>市区町村</label>
       <input type="text">
    </div>
  </div>
</form>

となる。

④郵便番号のinputのclassにp-postal-codeを記述する。

<form class="form h-adr">
  <span class="p-country-name" style="display:none;">Japan</span>
　 　<div class="form-box">
     <label>名前</label>
     <input type="text">
  </div>
  　<div class="form-box">
     <label>郵便番号</label>
     <input type="text" class="p-postal-code">
  </div>
  <div class="form-box">
     <label>都道府県</label>
     <select class="">
     　　　　<option value="">--</option>
     　　　　<option value="1">北海道</option>
     　　　　<option value="2">青森県</option>
     　　　　<option value="3">岩手県</option>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　<option value="45">宮崎県</option>
     　　　　<option value="46">鹿児島県</option>
     　　　　<option value="47">沖縄県</option>
     </select>
  </div>
  　<div class="form-box">
     <label>市区町村</label>
     <input type="text">
  </div>
</form>

⑤都道府県のselectのclassにp-region-idを記述する。

<form class="form h-adr">
  <span class="p-country-name" style="display:none;">Japan</span>
　 　<div class="form-box">
     <label>名前</label>
     <input type="text">
  </div>
  　<div class="form-box">
     <label>郵便番号</label>
     <input type="text" class="p-postal-code">
  </div>
  <div class="form-box">
     <label>都道府県</label>
     <select class="p-region-id">
     　　　　<option value="">--</option>
     　　　　<option value="1">北海道</option>
     　　　　<option value="2">青森県</option>
     　　　　<option value="3">岩手県</option>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　<option value="45">宮崎県</option>
     　　　　<option value="46">鹿児島県</option>
     　　　　<option value="47">沖縄県</option>
     </select>
  </div>
  　<div class="form-box">
     <label>市区町村</label>
     <input type="text">
  </div>
</form>

⑥市区町村のselectのclassにp-locality p-street-addressを記述する。
因みにp-localityは市や区までの情報を、p-street-addressは町名、村名、郡名までの情報が入る。
なので、フォームの項目によって使い分ける。

<form class="form h-adr">
  <span class="p-country-name" style="display:none;">Japan</span>
　 　<div class="form-box">
     <label>名前</label>
     <input type="text">
  </div>
  　<div class="form-box">
     <label>郵便番号</label>
     <input type="text" class="p-postal-code">
  </div>
  <div class="form-box">
     <label>都道府県</label>
     <select class="p-region-id">
     　　　　<option value="">--</option>
     　　　　<option value="1">北海道</option>
     　　　　<option value="2">青森県</option>
     　　　　<option value="3">岩手県</option>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　<option value="45">宮崎県</option>
     　　　　<option value="46">鹿児島県</option>
     　　　　<option value="47">沖縄県</option>
     </select>
  </div>
  　<div class="form-box">
     <label>市区町村</label>
     <input type="text　p-locality　p-street-address">
  </div>
</form>

以上で基本的な実装は完了。

以下の条件により、実装した際に動作しないという沼に溺れた為、
備忘録として記載する。

labelタグにforはつけない。

selectタグをターゲットにしたjqueryライブラリは使用しない。