郵便番号から住所を検索（完全一致）

        <div class="mb-3">
  <label class="form-label" for="zip1">郵便番号</label>
  <input id="zip1" class="form-control" name="zip1">
</div>
<div>
  <label class="form-label" for="js-result1">検索結果</label>
  <input id="js-result1" class="form-control bg-white" value="入力した郵便番号に一致する住所が見つかりません" readonly>
</div>
    const goqZipCode = new GoqZipCode();
const $zip1 = document.getElementById('zip1');
$zip1.addEventListener('input', async(e) => {
  const data = await goqZipCode.searchAddressFromZipcode({
    zipcode: String(e.target.value),
    is_exact: true,
  }).catch((e) => {
    return [];
  });

  const value = data.map((item) => `${item.pref}${item.city}${item.town}`);

  const $result = document.getElementById('js-result1');
  $result.value = value || '入力した郵便番号に一致する住所が見つかりません';
});
      

郵便番号から住所を検索（前方一致）

        <div class="mb-3">
  <label class="form-label" for="zip2">郵便番号</label>
  <input id="zip2" class="form-control" name="zip2">
  <div id="dropdown2" class="goqzip-dropdown"></div>
</div>
<div>
  <label class="form-label" for="js-result2">検索結果</label>
  <input id="js-result2" class="form-control bg-white">
</div>
    const goqZipCode = new GoqZipCode();
const $zip2 = document.getElementById('zip2');
const $dropdown2 = document.getElementById('dropdown2');
const $result2 = document.getElementById('js-result2');

const hideDropdown2 = () => {
  $dropdown2.innerText = '';
};

$zip2.addEventListener('input', async(e) => {
  const data = await goqZipCode.searchAddressFromZipcode({
    zipcode: String(e.target.value),
  }).catch((e) => {
    return [];
  });

  const template = data
    .map((item) => `<li><button type="button" class="js-dropdownButton goqzip-dropdown__button">〒${item.zipcode} （${item.pref}${item.city}${item.town}）</button></li>`)
    .join('');
  $dropdown2.innerHTML = template ? `<ul class="goqzip-dropdown__list">${template}</ul>` : '';

  const $dropdownButton = document.querySelectorAll('.js-dropdownButton');
  $dropdownButton.forEach((x, index) => {
    x.addEventListener('click', () => {
      const target = data[index];
      $zip2.value = target.zipcode;
      $result2.value = `${target.pref}${target.city}${target.town}`;
    });
  });

  document.addEventListener('click', hideDropdown2, { once: true });
});
      

住所から郵便番号を検索（完全一致）

        <div class="mb-3">
  <label class="form-label" for="address1">住所</label>
  <input id="address1" class="form-control" name="address1">
</div>
<div>
  <label class="form-label" for="js-result3">検索結果</label>
  <input id="js-result3" class="form-control bg-white" value="入力した住所に一致する郵便番号が見つかりません" readonly>
</div>
</div>
    const goqZipCode = new GoqZipCode();
const $address1 = document.getElementById('address1');
$address1.addEventListener('input', async(e) => {
  const data = await goqZipCode.searchZipcodeFromAddress({
    address: String(e.target.value),
    is_exact: true,
  }).catch((e) => {
    return [];
  });

  const value = data.map((item) => `${item.zipcode}`);

  const $result = document.getElementById('js-result3');
  $result.value = value || '入力した住所に一致する郵便番号が見つかりません';
});
      

住所から郵便番号を検索（前方一致）

        <div class="mb-3">
  <label class="form-label" for="address2">住所</label>
  <input id="address2" class="form-control" name="address2">
  <div id="dropdown4" class="goqzip-dropdown"></div>
</div>
<div>
  <label class="form-label" for="js-result4">検索結果</label>
  <input id="js-result4" class="form-control bg-white">
</div>
    const goqZipCode = new GoqZipCode();
const $address2 = document.getElementById('address2');
const $dropdown4 = document.getElementById('dropdown4');
const $result4 = document.getElementById('js-result4');

const hideDropdown4 = () => {
  $dropdown4.innerText = '';
};

$address2.addEventListener('input', async(e) => {
  const data = await goqZipCode.searchZipcodeFromAddress({
    address: String(e.target.value),
    is_left: true,
  }).catch((e) => {
    return [];
  });

  const template = data
    .map((item) => `<li><button type="button" class="js-dropdownButton goqzip-dropdown__button">〒${item.zipcode}（${item.pref}${item.city}${item.town}）</button></li>`)
    .join('');

  $dropdown4.innerHTML = template ? `<ul class="goqzip-dropdown__list">${template}</ul>` : '';

  const $dropdownButton = document.querySelectorAll('.js-dropdownButton');
  $dropdownButton.forEach((x, index) => {
    x.addEventListener('click', () => {
      const target = data[index];
      $address2.value = `${target.pref}${target.city}${target.town}`;
      $result4.value = target.zipcode;
    });
  });

  document.addEventListener('click', hideDropdown4, { once: true });
});
      

住所から郵便番号を検索（部分一致）

        <div class="mb-3">
  <label class="form-label" for="address3">住所</label>
  <input id="address3" class="form-control" name="address3">
  <div id="dropdown5" class="goqzip-dropdown"></div>
</div>
<div>
  <label class="form-label" for="js-result5">検索結果</label>
  <input id="js-result5" class="form-control bg-white">
</div>
    const goqZipCode = new GoqZipCode();
const $address3 = document.getElementById('address3');
const $dropdown5 = document.getElementById('dropdown5');
const $result5 = document.getElementById('js-result5');

const hideDropdown5 = () => {
  $dropdown5.innerText = '';
};

$address3.addEventListener('input', async(e) => {
  const data = await goqZipCode.searchZipcodeFromAddress({
    address: String(e.target.value),
  }).catch((e) => {
    return [];
  });

  const template = data
    .map((item) => `<li><button type="button" class="js-dropdownButton goqzip-dropdown__button">〒${item.zipcode}（${item.pref}${item.city}${item.town}）</button></li>`)
    .join('');

  $dropdown5.innerHTML = template ? `<ul class="goqzip-dropdown__list">${template}</ul>` : '';

  const $dropdownButton = document.querySelectorAll('.js-dropdownButton');
  $dropdownButton.forEach((x, index) => {
    x.addEventListener('click', () => {
      const target = data[index];
      $address3.value = `${target.pref}${target.city}${target.town}`;
      $result5.value = target.zipcode;
    });
  });

  document.addEventListener('click', hideDropdown5, { once: true });
});
      

オプション

インスタンス作成時にオブジェクトでオプションを指定することができます。
例：取得する住所の上限を100、郵便番号のハイフンを無し

        const options = {
  limit: 100,
  is_hyphen: false
};

const goqZipCode = new GoqZipCode(options);