Search Typeahead Did You Mean

ProNew

A search typeahead that draws the matched part of each title from ranges the server returns and, when nothing matches, offers the server's Did you mean suggestion as a pickable row. Use this when a search box serves misspelled queries.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

debounceMs200

placeholder

Guide and examples

When to use it

Use it for site and catalogue search where the engine knows which characters matched and can propose a corrected query, and people should be one key press from the correction.

Do not use it when matching is done on the client with a fuzzy library. See the fuzzy combobox, which highlights from the library's own ranges.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`search`	`(query, { signal }) => Promise<{ results, didYouMean? }>`	-	`results` are `{ id, title, ranges?: [start, end][] }`.
`onValueChange`	`(result) => void`	-	Runs when a result is picked.
`debounceMs`	`number`	`200`	Wait after typing.
`placeholder`	`string`	`Search…`	Input placeholder.

Accessibility

Matched characters are wrapped in <mark> (bold and underlined), and the option's accessible name is the plain title.
When there are no results and the server proposes a correction, the first option reads Did you mean <text>?; choosing it fills the input and searches again.
A polite status announces N results, No results and the correction.
Ranges are clamped to the title, so a bad range never throws.

Testing

The pattern ships with a Testing Library test (search-typeahead-did-you-mean.test.tsx) that covers highlighting from ranges, the Did you mean option replacing the query and clamped ranges.