https://kuramore.jp/sell/js/components/address-suggest.js

1import * as api from '../../../trend/js/components/api.js';
2
3/**
4 * 住所情報リストを元にサジェストを生成する
5 * @param {string} postCd 郵便番号
6 * @return {object} 生成した住所情報リストサジェスト
7 */
8export const createAddressSuggest = async (postCd) => {
9  // APIで住所情報を取得
10  const addressDataList = await api.fetchAddressData(postCd);
11
12  const ulElement = document.createElement('ul');
13  if (addressDataList.length > 0) {
14    // 取得した住所リストから10件の住所を取得
15    const firstTenAddressList = addressDataList.slice(0, 10);
16
17    // 住所サジェストを作成する
18    firstTenAddressList.forEach(addressData => {
19      const liElement = document.createElement('li');
20      const pElement = document.createElement('p');
21  
22      pElement.textContent = addressData.prefName + addressData.cityName + addressData.townName + addressData.chomeName;
23      liElement.appendChild(pElement);
24      liElement.setAttribute('bukken-pref-cd', addressData.prefCd);
25      liElement.setAttribute('bukken-city-cd', addressData.cityCd);
26      liElement.setAttribute('bukken-town-cd', addressData.townCd);
27      liElement.setAttribute('bukken-chome-cd', addressData.chomeCd);
28      liElement.setAttribute('bukken-pref-name', addressData.prefName);
29      liElement.setAttribute('bukken-city-name', addressData.cityName);
30      liElement.setAttribute('bukken-town-name', addressData.townName);
31      liElement.setAttribute('bukken-chome-name', addressData.chomeName);
32  
33      ulElement.appendChild(liElement);
34    });
35  }
36
37  return ulElement;
38}