Autocomplete suggestions fire within 300ms with relevant results

Autocomplete latency above 300ms breaks the perceptual contract users have with search — they stop trusting the suggestions and abandon the feature entirely. ISO 25010:2011 performance-efficiency frames this as a functional responsiveness requirement, not a nice-to-have. Directories that serve irrelevant or hardcoded suggestions compound the damage: users waste time selecting a suggestion that returns no matching listings, eroding confidence in the product. On mobile networks, where the autocomplete round-trip competes with elevated latency, a bloated debounce delay also hammers your backend with redundant queries on every keystroke, driving up infrastructure cost.

Add a debounced fetch in components/SearchInput.tsx capped at 300ms, querying your real listing index — not a static category list.

// components/SearchInput.tsx
useEffect(() => {
  if (!query) return setSuggestions([])
  const timer = setTimeout(async () => {
    const res = await fetch(`/api/listings/search?q=${encodeURIComponent(query)}`)
    const data = await res.json()
    setSuggestions(data.results.slice(0, 5))
  }, 250) // ≤300ms
  return () => clearTimeout(timer)
}, [query])

Index the name and category columns in your listings table so the /api/listings/search handler returns in single-digit milliseconds under load.