Vue

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="vue-app"></div>

const { createApp, ref, watch } = Vue;

createApp({
  setup() {
    const query = ref("");
    const items = ref([]);
    const loading = ref(false);
    const apiUrl = "https://api.datasaras.com";
    const apiKey = "YOUR_API_KEY";

    let debounceTimer;
    watch(query, (newVal) => {
      clearTimeout(debounceTimer);
      if (!newVal.trim()) {
        items.value = [];
        return;
      }
      debounceTimer = setTimeout(async () => {
        loading.value = true;
        const params = new URLSearchParams({ keyword: newVal.trim(), limit: "10" });
        const res = await fetch(
          `${apiUrl}/address-api-v1/au/address/suggest?${params}`,
          { headers: { "x-auth-key": apiKey } }
        );
        const json = await res.json();
        items.value = res.ok ? (json.items ?? []) : [];
        loading.value = false;
      }, 300);
    });

    function selectAddress(addr) {
      query.value = addr;
    }

    return { query, items, loading, selectAddress };
  },
  template: `
    <div>
      <input v-model="query" placeholder="Type an address…" />
      <span v-if="loading">Searching…</span>
      <ul>
        <li v-for="item in items" :key="item.id" @click="selectAddress(item.address_line_1)">
          {{ item.address_line_1 }}
        </li>
      </ul>
    </div>
  `
}).mount("#vue-app");