Search-as-You-Type Patterns

Also Known As

TL;DR

Explanation

Search-as-you-type (SAYT) requires: debouncing (wait 150-300ms after last keystroke before querying), prefix matching (efficient with Trie or inverted index prefix queries), result highlighting (bold the matched substring), loading state management, empty state (no results), keyboard navigation (arrow keys, Enter), and accessibility (aria-live for announcements, aria-expanded for combobox). Backend: Meilisearch's typo-tolerant prefix search is ideal; Elasticsearch's query_string or prefix query also works. Cache recent queries client-side to avoid redundant requests.

Common Misconception

Why It Matters

Common Mistakes

• No debounce — fires a request on every keystroke.
• Not aborting previous requests — out-of-order responses show stale results.
• Minimum query length without feedback — users confused why nothing happens at 1-2 characters.
• No keyboard navigation in suggestion list — mouse-only search is inaccessible.

Code Examples

// No debounce, no abort — hammers the API:
document.getElementById('search').addEventListener('input', e => {
    fetch('/api/search?q=' + e.target.value)
        .then(r => r.json())
        .then(renderResults);
    // 'php' typed: 3 requests fired, responses may arrive out of order
});

let debounceTimer, currentController;
document.getElementById('search').addEventListener('input', e => {
    clearTimeout(debounceTimer);
    currentController?.abort(); // Cancel previous request

    if (e.target.value.length < 2) { clearResults(); return; }

    debounceTimer = setTimeout(async () => {
        currentController = new AbortController();
        try {
            const r = await fetch('/api/search?q=' + encodeURIComponent(e.target.value),
                { signal: currentController.signal });
            const data = await r.json();
            renderResults(data);
        } catch(e) {
            if (e.name !== 'AbortError') showError();
        }
    }, 250); // 250ms debounce
});

References

• ↗ https://www.meilisearch.com/docs/learn/getting_started/quick_start

Tags

Related Terms