import { useEffect, useState } from "react"; import "./styles.css"; const cities = [ "Toronto", "Tokyo", "Toulouse", "London", "Lisbon", "Lima", "New York", "New Delhi", ]; const searchCities = (query: string) => new Promise((resolve) => window.setTimeout( () => resolve( cities.filter((city) => city.toLowerCase().includes(query.toLowerCase()) ) ), 500 ) ); export default function App() { const [query, setQuery] = useState(""); const [results, setResults] = useState([]); const [loading, setLoading] = useState(false); useEffect(() => { if (!query.trim()) { setResults([]); setLoading(false); return; } let active = true; const timer = window.setTimeout(async () => { setLoading(true); const matches = await searchCities(query); if (active) { setResults(matches); setLoading(false); } }, 300); return () => { active = false; window.clearTimeout(timer); }; }, [query]); const select = (city: string) => { setQuery(city); setResults([]); }; return (

Travel planner

Choose a city

0} aria-controls="city-list" aria-autocomplete="list" value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Start typing…" /> {loading && ( Searching… )} {!loading && query && ( )}

); }