UX Patterns Guide
UI + UX Search, Browse, And Discovery standard

Typeahead

Provide a live typeahead result panel that updates from the current query with clear thresholds, loading, stale-response handling, keyboard support, and distinct actions for selecting a hit or submitting the full query.

Open in lab Compare alternatives
Decision first

Choose this pattern when the problem matches

Use when

  • Users search large datasets and benefit from seeing result hits before full submit.
  • The backend can return relevant prefix or as-you-type results quickly and cheaply.
  • Users often know part of the target title, record, file, command, or content and can recognize it in a live panel.
  • The product can handle stale responses, loading, keyboard behavior, and privacy constraints honestly.

Avoid when

  • The task is choosing one constrained field value, which is better handled as autocomplete.
  • The product only has suggested query phrases and no live result hits.
  • Results should not change until users intentionally submit a search.
  • Partial queries are sensitive, expensive, unreliable, or not allowed to leave the device.
  • The backend latency makes live panels flicker or frequently show stale data.

Problem it prevents

Users often need fast feedback while searching large content sets, but waiting for explicit submit slows exploration and naive every-keystroke search can produce flicker, stale results, accidental selection, and wasted requests.

Pattern anatomy

What a strong implementation has to make clear

User need

The product has a large searchable result set where users can identify useful hits from partial input.

Pattern promise

Provide a live typeahead result panel that updates from the current query with clear thresholds, loading, stale-response handling, keyboard support, and distinct actions for selecting a hit or submitting the full query.

Required state

Empty state before typing.

Recovery path

Stale results appear for an older query after the user types more characters.

Access contract

Use a labelled input and expose the live result panel with combobox, listbox, or region semantics appropriate to the interaction.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • Typing ca opens a panel with live case, calendar, and claim results, a 3 results for ca count, active row styling, and source labels.
  • A slow network state keeps the typed query visible and shows Searching for case... instead of clearing the panel.
  • A user types cas, sees matching case records immediately, selects Case 104, and can still edit the query or submit a full search.
  • A user types c, sees the two-character threshold message, then types ca and receives live results.
Weak implementation

Vague, hidden, hard to recover from

  • The input silently becomes Case 104 because the first result was auto-filled while the user was typing ca.
  • Rows flicker between old and new results with no loading state or query label.
  • Users cannot finish typing because focus jumps into the first result on every keystroke.
  • Slow old results overwrite newer query results and users open the wrong record.
UI guidance
  • Render a labelled input with a live result panel that shows matching result hits, result count, active result, source labels, and loading or stalled state while the user types.
  • Keep the typed query visually separate from result selection; do not make the top live hit look like it has already replaced or committed the user's text.
UX guidance
  • Use typeahead when users benefit from immediate result feedback while typing and can either open a result hit or continue to a full submitted search.
  • Protect the typing flow with minimum length, debounce, request cancellation or stale-response guards, empty preview copy, keyboard navigation, and a clear final submit path.
Implementation contract

What the implementation must handle

States

  • Empty state before typing.
  • Below-minimum-length state explaining when live lookup begins.
  • Loading or stalled state tied to the current query.
  • Populated live-result state with result count, source labels, and active result.

Interaction

  • Typing changes the query and schedules live lookup only when the minimum length and privacy rules allow it.
  • Each response must be associated with the query that requested it and ignored if the user has typed a newer query.
  • The active result can move with arrow keys without replacing the input value.
  • Enter opens the active result only when result focus or active option semantics make that explicit; otherwise it submits the query.

Accessibility

  • Use a labelled input and expose the live result panel with combobox, listbox, or region semantics appropriate to the interaction.
  • Announce loading, result count, no-result, selected result, and final search outcomes through a polite status region.
  • Expose result title, type, source, and secondary context as text, not only icons.
  • Do not rely on color alone for the active result; provide focus or selected styling and text labels.

Review

  • Are rows live result hits for the current typed query, or are they query suggestions or known-value options?
  • What minimum length and debounce policy prevents noisy or expensive every-keystroke search?
  • How does the UI show loading, stalled, no-result, and stale-response states?
  • Can users keep typing without the first result replacing their query?
Interactive lab

Inspect the states before you copy the pattern

Search as you type

Type partial queries, inspect live result hits, trigger loading, select a result, and verify stale results do not replace newer input.

Typeahead
Interactive demo is ready

Launch the live UI/UX lab when you want to inspect states, keyboard behavior, and common failure modes.

State To Inspect

Empty state before typing.

Keyboard / Access

Typing updates the query and leaves focus in the input.

Avoid Generating

Calling a known-value autocomplete field typeahead even though no result set is searched.
Evidence trail

Source-backed claims behind this guidance

Autocomplete JavaScript API

Algolia - checked

Algolia documents as-you-type autocomplete state, sources, collections, keyboard behavior, and loading or stalled state.

Search-as-you-type field type

Elastic - checked

Elastic documents a search_as_you_type field optimized for prefix matching as users enter text.

Carbon Design System Search Pattern

IBM Carbon Design System - checked

Carbon documents type-ahead suggestions, keyboard cycling, Enter selection, Escape dismissal, and search result counts.

WAI-ARIA Authoring Practices Guide

W3C Web Accessibility Initiative - checked

WAI-ARIA APG provides accessible popup and keyboard expectations relevant to typeahead panels.

Full agent/debug reference

Problem Context

  • The product has a large searchable result set where users can identify useful hits from partial input.
  • The search backend or index can support low-latency prefix or as-you-type matching.
  • The interface must balance immediate feedback with network cost, privacy, mobile typing, and keyboard control.

Selection Rules

  • Choose typeahead when live result hits should appear as the user types and the result set can update safely before explicit submit.
  • Set a minimum query length before searching when short prefixes produce noisy, expensive, or privacy-sensitive results.
  • Debounce or pace remote requests and ignore stale responses so older results cannot overwrite newer query state.
  • Show a loading, searching, or stalled state when live results are not yet ready.
  • Keep typed text under user control; selecting a hit should not be confused with auto-filling the input.
  • Let users open a typeahead result directly or submit the typed query for a full result page.
  • Use autocomplete when the field must resolve to a known value; use search suggestions when rows are suggested query phrases; use basic search when results should wait for explicit submit.
  • Show result type, source, count, and enough secondary metadata to distinguish similar hits.
  • Handle no live results, offline or failed lookup, cleared input, input blur, Escape dismissal, and mobile viewport constraints.
  • Avoid typeahead for sensitive searches, high-latency backends, costly queries, or domains where every keystroke should not leave the device.

Required States

  • Empty state before typing.
  • Below-minimum-length state explaining when live lookup begins.
  • Loading or stalled state tied to the current query.
  • Populated live-result state with result count, source labels, and active result.
  • Selected result state where opening a hit is distinct from submitting the query.
  • No live results state for the current typed query.
  • Stale-response ignored state when older results arrive after a newer query.
  • Submitted full-search state after the user explicitly searches the current query.

Interaction Contract

  • Typing changes the query and schedules live lookup only when the minimum length and privacy rules allow it.
  • Each response must be associated with the query that requested it and ignored if the user has typed a newer query.
  • The active result can move with arrow keys without replacing the input value.
  • Enter opens the active result only when result focus or active option semantics make that explicit; otherwise it submits the query.
  • Escape closes the typeahead panel without clearing the typed query.
  • Clicking or pressing a result opens that result or previews it, while final search submit runs the typed query.
  • Clearing input cancels pending live lookup and resets result, loading, and active-result state.

Implementation Checklist

  • Define whether rows are result hits, entities, commands, or query suggestions and label the source accordingly.
  • Configure minimum length, debounce interval, maximum visible results, request timeout, and stale-response guard.
  • Implement loading, stalled, no-results, error, offline, and cleared states for live lookup.
  • Preserve typed query separately from selected result ID and full-search submitted query.
  • Expose combobox or listbox semantics when the panel behaves like selectable options, including active descendant or equivalent focus management.
  • Provide keyboard behavior for arrow movement, Enter, Escape, Tab, and pointer selection.
  • Test rapid typing, deleting text, IME composition, mobile keyboards, screen readers, slow responses, failed responses, privacy-sensitive queries, and result opening.
  • Measure request volume, stale response suppression, selected result rate, full-search rate, no-result rate, and abandoned typeahead panels.

Common Generated-UI Mistakes

  • Calling a known-value autocomplete field typeahead even though no result set is searched.
  • Calling suggested query phrases typeahead when no live result hits are shown.
  • Auto-filling the first result into the input while users type.
  • Sending a remote request for every keystroke with no debounce or minimum length.
  • Letting stale results overwrite the current query's result panel.
  • Showing no loading or stalled state during slow lookup.
  • Mixing ads, recent searches, query suggestions, and result hits without source labels.
  • Moving keyboard focus out of the input unexpectedly.

Critique Questions

  • Are rows live result hits for the current typed query, or are they query suggestions or known-value options?
  • What minimum length and debounce policy prevents noisy or expensive every-keystroke search?
  • How does the UI show loading, stalled, no-result, and stale-response states?
  • Can users keep typing without the first result replacing their query?
  • Does Enter open an active result or submit the query, and is that contract clear?
  • Can users distinguish source, type, and relevance of live hits?
  • What privacy, telemetry, or backend-cost constraints apply to sending partial queries?
Accessibility
  • Use a labelled input and expose the live result panel with combobox, listbox, or region semantics appropriate to the interaction.
  • Announce loading, result count, no-result, selected result, and final search outcomes through a polite status region.
  • Expose result title, type, source, and secondary context as text, not only icons.
  • Do not rely on color alone for the active result; provide focus or selected styling and text labels.
  • Keep the input value visible and editable while results are displayed.
  • Do not force focus into results while users are still typing.
Keyboard Behavior
  • Typing updates the query and leaves focus in the input.
  • Arrow Down and Arrow Up move the active result when the panel is open.
  • Enter opens the active result only when active-result behavior is clear; otherwise it submits the current query.
  • Escape closes the panel without clearing input.
  • Tab moves out of the typeahead control without unexpectedly selecting a result.
  • After opening a result or submitting search, focus moves to the destination heading or result summary.
Variants
  • Live result typeahead
  • Instant search panel
  • Entity typeahead
  • Command typeahead
  • Search-as-you-type page results
  • Grouped typeahead results
  • Local index typeahead
  • Remote typeahead

Verification

Last verified: