Bir autocomplete (typeahead) arama bileşenini nasıl tasarlarsınız?

Temel fikir: kullanıcı yazdıkça debounce edilmiş istekler atmak, sonuçları cache'lemek, race condition'ları önlemek ve bileşeni klavye ile ekran okuyucuya tam uyumlu yapmak.

Gereksinimler

• Minimum karakter sayısı (ör. 2), sonuç sayısı limiti, yüksek trafik (ör. Google arama kutusu mu, küçük bir filtre mi?).
• Sonuçlar sadece metin mi, zengin içerik (görsel, kategori) mi?

Mimari ve veri akışı

• Input -> useDebounce (200-300 ms) -> SearchService -> sunucu.
• Cache: Map<query, {results, timestamp}>; TTL ile ve sınırlı boyutta (LRU). Aynı sorgu tekrar yazılınca ağa gitmeden gösterilir.
• Race condition: Önceki isteği AbortController ile iptal et veya sadece en son sorgunun cevabını uygula.

let controller: AbortController | null = null;
async function search(query: string) {
  controller?.abort();
  controller = new AbortController();
  const res = await fetch(`/api/search?q=${encodeURIComponent(query)}&limit=10`,
    { signal: controller.signal });
  return res.json();
}

Bileşen API'si

<Autocomplete fetchSuggestions minChars debounceMs renderItem onSelect /> gibi esnek, headless bir API.

Erişilebilirlik

• Input role="combobox", aria-expanded, aria-controls, aria-activedescendant.
• Liste role="listbox", öğeler role="option" ve aria-selected.
• Ok tuşları ile gezinme, Enter ile seçme, Escape ile kapatma.

Optimizasyonlar

• Eşleşen kısmı vurgulama (<mark>), boş/hata/yükleniyor durumları.
• Popüler sorguları önceden yükleme, sonuç listesi uzunsa virtualization.
• Mobilde klavye ve ekran alanı, yavaş ağda iskelet (skeleton) gösterimi.