金融機関コード API

<!-- 金融機関コード → 銀行名 自動補完フォーム -->
<form>
  <label>金融機関コード</label>
  <input type="text" id="bank_code"
    placeholder="0001" maxlength="4">

  <label>金融機関名</label>
  <input type="text" id="bank_name" disabled>

  <label>支店コード</label>
  <input type="text" id="branch_code"
    placeholder="001" maxlength="3">

  <label>支店名</label>
  <input type="text" id="branch_name" disabled>
</form>

// 金融機関コード入力 → 銀行名を自動取得
const bankInput = document.getElementById('bank_code');
const branchInput = document.getElementById('branch_code');

bankInput.addEventListener('keyup', function() {
  const code = bankInput.value;
  if (code.length !== 4) return;

  fetch("https://bank.teraren.com/banks/"
      + code + ".json")
    .then(r => r.json())
    .then(json => {
      document.getElementById('bank_name')
        .value = json.normalize.name;
    })
    .catch(() => {
      document.getElementById('bank_name')
        .value = '';
    });
});

// 支店コード入力 → 支店名を自動取得
branchInput.addEventListener('keyup', function() {
  const bCode = branchInput.value;
  if (bCode.length !== 3) return;

  fetch("https://bank.teraren.com/banks/"
      + bankInput.value + "/branches/"
      + bCode + ".json")
    .then(r => r.json())
    .then(json => {
      document.getElementById('branch_name')
        .value = json.normalize.name;
    })
    .catch(() => {
      document.getElementById('branch_name')
        .value = '';
    });
});