郵便番号検索で住所自動入力

コード例 - Sample

HTML

<div class="example">
 <div class="postcode">
  <div class="postcode-in">
   <label>〒 <input type="text" name="num1" maxlength="3"> － <input type="text" name="num2" maxlength="4"></label>
   <p id="waiting-serach"></p>
  </div>
  <div class="postcode-out">
   <label><input type="text" id="address1" readonly>　都道府県名</label>
   <label><input type="text" id="address2" readonly>　市町村名</label>
   <label><input type="text" id="address3" readonly>　町域名</label>
   <label><input type="text" id="address4" readonly>　都道府県コード</label>
  </div>
 </div>
</div>

CSS

▶CSSは装飾用なので設置しなくても可

<style>
.example>.postcode>.postcode-in{
 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
 align-items: center;
 border-bottom: 1px solid #e5e5e5;
 padding-bottom: 1rem;
 margin-bottom: 1rem;
}
.example>.postcode>.postcode-in>label>input[type=text],
.example>.postcode>.postcode-out>label>input[type=text]{
 width: 100%;
 font-size: 0.9rem;
 line-height: 1.2em;
 background-color: #e5e5e5;
 border: 1px solid #000;
 border-radius: 2px;
}
.example>.postcode>.postcode-in>label>input[type=text]{
 width: 4rem;
}
.example>.postcode>.postcode-in>#postcode-bt{
 font-size: 0.7rem;
 line-height: 1em;
 background-color: #e5e5e5;
 border: 1px solid #a9a9a9;
 border-radius: 3px;
 padding: 0.5em 1em;
 margin-left: 10px;
}
.example>.postcode>.postcode-out{
 display: flex;
 flex-direction: column;
 flex-wrap: nowrap;
}
.example>.postcode>.postcode-out>label>input[type=text]{
 width: 15rem;
}
@media screen and (max-width:768px){
 .example>.postcode>.postcode-out>label{
  display: inline-flex;
  flex-direction: column;
  margin-bottom: 0.5rem;
 }
}
</style>

JavaScript

<script>
//ボタンクリック用
document.getElementById('postcode-bt').addEventListener('click', function(){
 let postnum1 = document.getElementsByName('num1')[0].value; //郵便番号左側取得
 let postnum2 = document.getElementsByName('num2')[0].value; //郵便番号右側取得

 postcodeGetFunc( postnum1, postnum2 );
});

//async(非同期)で住所情報を取得
async function postcodeGetFunc( n1, n2 ){

 //リクエストURLを構成
 let makeQuery = 'https://zipcloud.ibsnet.co.jp/api/search?zipcode=' + String( n1 ) + String( n2 ); //引数を整数で加算処理しないように文字列に変換

 //郵便番号検索APIへHTTPリクエスト(awaitでレスポンスが返ってくるまで待機)
 await fetch( makeQuery )
 .then( async response=>{ //レスポンスを取得
  let result = await response.json(); //jsonメソッド呼び出しで変数へ格納(awaitでレスポンスが返ってくるまで待機)

  //レスポンスstatusが200(正常)かつ、resultsがnull（空）でないとき処理を継続
  if( result.status == 200 && result.results != null ){

   //各テキストエリアにデータ格納
   document.getElementById('address1').value = result.results[0].address1;
   document.getElementById('address2').value = result.results[0].address2;
   document.getElementById('address3').value = result.results[0].address3;
   document.getElementById('address4').value = result.results[0].prefcode;
  }
 });
}
</script>