TypeaheadSearch

A search form with stylized autocomplete suggestions.

TypeaheadSearch contains a form with a text input, a submit button, and a slot for hidden inputs. The parent component must listen for changes in the search query (which are debounced by default), fetch or calculate search results, then provide them as an array of suggestions for display to the user as a menu of ListTiles.

At the end of the list of suggestions, a final option to go to the search page for the current search query is provided.

Events are emitted to the parent when a suggestion is selected and when the form is submitted, with data about the selected suggestion (e.g. for analytics).

TextInput props apply

This component contains a TextInput component. You can bind TextInput props to this component and they will be passed to the TextInput within.

Attributes passed to input

This component will pass any HTML attributes applied to it, except for CSS class, to the <input> element within the component.

Demos

Default

This basic example computes suggestions on input and passes them back to the TypeaheadSearch component. Open the console to see emitted events.

With initial input value

TypeaheadSearch has a prop, initialInputValue, that can be used to pass in the initial value of the TextInput. This is useful when replacing a server-rendered UI where the user may have started typing a search query.

On mount, TypeaheadSearch will fetch suggestions for the initial input value if it's provided. After that, the input value is tracked internally and will be emitted up to the parent component when the value changes.

Without thumbnails

Use the hideThumbnail prop if the suggestions will not have thumbnails.

Usage

Props

Prop nameDescriptionTypeValuesDefault
idID attribute for the form.string-
formActionAction attribute for form.string-
buttonLabelSubmit button text.string-
suggestionsLabelLabel attribute for the list of suggestions.string-
suggestionsList of suggestions. See the SearchResult type.SearchResult[]-() => []
initialInputValueInitial value for the text input.

Triggers an initial new-input event on mount.
string-''
searchFooterUrlLink for the final suggestion.

This will typically be a link to the search page for the current search query.
string-''
debounceIntervalTime interval for debouncing input events, in ms.number-DebounceInterval
highlightQueryWhether the search query should be highlighted within a suggestion's title.boolean-false
hideThumbnailWhether to hide suggestions' thumbnails.boolean-false
hideDescriptionWhether to hide suggestions' descriptions.boolean-false

Events

Event namePropertiesDescription
new-inputvalue string - The new input valueWhen the text input value changes. Debounced by default.
suggestion-clickevent SuggestionClickEvent - Data for the selected suggestionWhen a suggestion is selected.
submitevent SuggestionClickEvent - Data for the selected suggestionWhen the form is submitted.

Slots

NameDescriptionBindings
search-footer-textA slot for passing in translated search footer text, i.e.
Search for pages containing<strong class="cdx-typeahead-search__search-footer__query"></strong>
searchQuery string - Input text entered by the user
defaultA slot for passing hidden inputs, i.e.
<input type="hidden" name="language" value="en">

Last updated: