Arama kutusu için autocomplete (typeahead) özelliğini frontend'den backend'e nasıl tasarlarsınız?

Autocomplete'in hedefi kullanıcı yazarken 100 ms civarında öneri göstermektir. Bunun için frontend gereksiz istekleri azaltmalı, backend ise önceden hazırlanmış ve önbelleğe alınmış bir prefix indeksinden hızlı yanıt vermelidir.

Frontend

• Debounce (ör. 200-300 ms): her tuşa basışta değil, kullanıcı duraksayınca istek at.
• Minimum karakter: 2-3 karakterden önce istek atma.
• Eski istekleri iptal et: AbortController ile; aksi halde geç gelen eski yanıt yeni sonuçların üzerine yazılır (race condition).
• Client cache: aynı prefix tekrar yazılırsa (silip yeniden yazma) istek atma.
• Erişilebilirlik: combobox rolü, ok tuşları ile gezinme, Enter ile seçme.

let controller: AbortController | null = null;
async function suggest(q: string) {
  controller?.abort();
  controller = new AbortController();
  const res = await fetch(`/api/suggest?q=${encodeURIComponent(q)}`, { signal: controller.signal });
  return res.json();
}
// input onChange -> debounce(suggest, 250)

Backend

• Küçük/orta ölçek: PostgreSQL'de pg_trgm index ile ILIKE 'prefix%' veya Elasticsearch/OpenSearch, Meilisearch, Typesense gibi arama motorlarının search_as_you_type / edge n-gram özellikleri.
• Büyük ölçek: popüler sorgular offline olarak (arama loglarından) toplanır, her prefix için en popüler ilk 10 öneri önceden hesaplanır ve Redis gibi bir key-value store'da veya bellekte bir trie yapısında tutulur. İstek anında hesaplama yapılmaz, sadece okunur.
• Yanıt kısa TTL ile CDN'de cache'lenebilir (/suggest?q=iph herkese aynı ise).
• Kişiselleştirme (son aramalarım) ayrı ve küçük bir istekle birleştirilir.

Kalite

• Türkçe karakter normalizasyonu (ı/i, ş/s) ve yazım hatası toleransı (fuzzy).
• Sıralama: popülerlik, tazelik, kullanıcının geçmişi.
• Uygunsuz veya kişisel verilerin öneri olarak çıkmaması için filtreleme.