React

import { useState, useEffect, useCallback } from "react";

function AddressSuggest() {
  const [query, setQuery] = useState("");
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(false);
  const apiUrl = "https://api.datasaras.com";
  const apiKey = "YOUR_API_KEY"; // Use env var in production

  const fetchSuggestions = useCallback(async (keyword) => {
    if (!keyword.trim()) return [];
    const params = new URLSearchParams({ keyword: keyword.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();
    return res.ok ? json.items ?? [] : [];
  }, []);

  useEffect(() => {
    if (!query.trim()) {
      setItems([]);
      return;
    }
    setLoading(true);
    const timer = setTimeout(() => {
      fetchSuggestions(query).then((data) => {
        setItems(data);
        setLoading(false);
      });
    }, 300);
    return () => clearTimeout(timer);
  }, [query, fetchSuggestions]);

  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Type an address…"
      />
      {loading && <span>Searching…</span>}
      <ul>
        {items.map((item) => (
          <li key={item.id} onClick={() => setQuery(item.address_line_1)}>
            {item.address_line_1}
          </li>
        ))}
      </ul>
    </div>
  );
}