A search form that provides a menu with 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 search results for display to the user in a dropdown menu.
At the end of the list of search results, a final option to go to the search page for the current search query is provided.
Events are emitted to the parent when a search result is selected and when the form is submitted, with data about the selected item (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.
Search Wikipedia articles
This implementation of TypeaheadSearch fetches articles from English Wikipedia. Note that the input expands on focus via the
autoExpandWidth prop, thumbnails are enabled via the
showThumbnail prop, and the "search" button is added via the
buttonLabel prop. Open the console to see emitted events.
Search Wikidata items
In this example, results are fetched from Wikidata. Thumbnails are disabled, and the input doesn't expand on focus. There is no button, because the
buttonLabel prop is not set. Open the console to see emitted events.
With initial input value
initialInputValue prop 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, or for pre-populating the search term when a user navigates back to a page where they had previously entered one.
On mount, TypeaheadSearch will fetch search results 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.
Pending state indicators, including an inline progress bar and a message stating that results are pending, can be displayed to users with slower connections while search results are being fetched. To enable this, provide content in the
The pending state indicators will display when a search takes longer than half a second, so you may need to throttle your connection to see them in the demo below.
No results message
A message prompt that no search results were found. To enable this, provide content in the
|ID attribute for the form.|
|Action attribute for form.|
|Label attribute for the list of search results.|
|List of search results. See the SearchResult type.|
|Label for the submit button.|
If no label is provided, the submit button will not be displayed.
|Initial value for the text input.|
Triggers an initial
|Link for the final menu item.|
This will typically be a link to the search page for the current search query.
|Time interval for debouncing input events, in ms.|
|Whether the search query should be highlighted within a search result's title.|
|Whether to show search results' thumbnails (or a placeholder icon).|
|Contract the width of the input when unfocused and expand the width of the input when focused to accommodate the extra width of the thumbnails.|
This prop is ignored if showThumbnail is false.
|Limit the number of menu items to display before scrolling.|
Setting this prop to anything falsy will show all menu items.
By default, all menu items are shown.
|Focus the component's input element.||Returns: |
|When the user scrolls towards the bottom of the menu.|
If it is possible to add or load more menu items, then now would be a good moment so that the user can experience infinite scrolling.
|value ||When the text input value changes. Debounced by default.|
|event ||When a search result is selected.|
|event ||When the form is submitted.|
|search-results-pending||A slot for a translated "Loading search results" message.|
|search-no-results-text||A slot for passing in a translated "no results" message.|
|search-footer-text||A slot for passing in translated search footer text.||search-query |
|default||A slot for passing hidden inputs, i.e.|
When your CSS-only TypeaheadSearch component will be swapped out for a Vue version that shows thumbnails (see the "With initial input value" demo above), apply the
.cdx-typeahead-search--show-thumbnail class to the wrapper
<div> to expand the start icon width.
With thumbnails and auto-expand width
When your CSS-only TypeaheadSearch component will be swapped out for a Vue version that shows thumbnails and expands when results are shown (see the "Search Wikipedia articles" demo above), apply the
.cdx-typeahead-search--auto-expand-width classes to the wrapper
<div> to reduce the starting size of the input.