| UI or UX | UI + UX - Live search-as-you-type result lookup with incremental result preview | UI + UX - Input widget with suggestion behavior | UI + UX - Suggested-query surface | UI + UX - Search input and result list |
| 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. | Render a labeled text field, suggestion popup, highlighted option, selected value, and no-match state. | Render a search field with query suggestions, active option, selected suggestion, and no-suggestion state. | Render a labeled search field, result count, matching rows, and clear action. |
| 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. | Help users complete a known value faster without forcing an incorrect suggestion. | Help users formulate better search queries without forcing a choice. | Help users find known content without browsing every category. |
| Good UI | Typing ca opens a panel with live case, calendar, and claim results, a 3 results for ca count, active row styling, and source labels. | Persistent label above the input, readable text size, clear popup alignment, and visible highlighted option. | Suggestions appear directly below the search field with active row, readable labels, and optional matched text. | A clearly labeled search field with result count and results placed directly below. |
| Bad UI | The input silently becomes Case 104 because the first result was auto-filled while the user was typing ca. | Placeholder-only label that disappears after typing. | Suggestions overlay unrelated content without a dismiss path. | Search input hidden behind only an icon with no label. |
| Good UX | A user types cas, sees matching case records immediately, selects Case 104, and can still edit the query or submit a full search. | Typing filters suggestions while preserving the exact typed value. | Users can keep typing, choose a suggestion, dismiss suggestions, or submit their own query. | Users can type, revise, clear, and keep context while inspecting results. |
| Bad UX | Users cannot finish typing because focus jumps into the first result on every keystroke. | Automatically forcing the first suggestion into the field. | Auto-submitting the top suggestion. | Search silently changes unrelated filters. |
| Best fit | Users search large datasets and benefit from seeing result hits before full submit. | The list is long but values are known. | The system can predict likely queries. | Users know a word, name, or identifier. |
| Avoid when | The task is choosing one constrained field value, which is better handled as autocomplete. | The task is open-ended query exploration. | Suggestions are low quality or biased toward irrelevant content. | The task is choosing a command with side effects. |
| Required state | Empty state before typing. | Empty input state. | No input state. | Empty query state. |
| Accessibility burden | Use a labelled input and expose the live result panel with combobox, listbox, or region semantics appropriate to the interaction. | Expose combobox expanded state, active descendant, and option labels. | Expose the suggestions list and active option. | The input has a stable accessible name. |
| Common misuse | Calling a known-value autocomplete field typeahead even though no result set is searched. | Forcing the first suggestion when the user did not choose it. | Auto-submitting the top suggestion without confirmation. | Using placeholder text as the only label. |