Làm ô nhập địa chỉ có gợi ý cho trang đặt hàng

curl --get 'https://cloud.gmap.vn/api/idunn/v1/autocomplete' \
  --header 'x-api-key: public-gmap-cloud-x-api-key-demo' \
  --data-urlencode 'q=Chợ Hàn' \
  --data 'lang=vi'

const KEY = 'public-gmap-cloud-x-api-key-demo';
const input = document.querySelector('#address');
const list = document.querySelector('#suggestions');
let timer;
let controller;

input.addEventListener('input', () => {
  clearTimeout(timer);
  const q = input.value.trim();
  if (q.length < 3) return list.replaceChildren();
  timer = setTimeout(async () => {
    controller?.abort();
    controller = new AbortController();
    const url = new URL('https://cloud.gmap.vn/api/idunn/v1/autocomplete');
    url.search = new URLSearchParams({ q, lang: 'vi', 'x-api-key': KEY });
    try {
      const { features = [] } = await fetch(url, { signal: controller.signal }).then((r) => r.json());
      list.replaceChildren(...features.slice(0, 5).map(toItem));
    } catch (error) {
      if (error.name !== 'AbortError') list.replaceChildren();
    }
  }, 250);
});

function toItem(feature) {
  const item = document.createElement('li');
  item.textContent = feature.properties.geocoding.label;
  item.addEventListener('click', () => {
    const [lon, lat] = feature.geometry.coordinates;
    input.value = feature.properties.geocoding.label;
    document.querySelector('#lat').value = lat;
    document.querySelector('#lon').value = lon;
    list.replaceChildren();
  });
  return item;
}