The search component allows the user to filter data based on a query. There are two variants: a basic component for simple filtering, and a "search and find" variant which has buttons to browse the results, displays which result is currently highlighted ("x of y results") and provides a "jump to result" link for keyboard users.
The component does not handle the data to filter. It simply gives you the text typed by the user through the
value property, which is typically retrieved via the "input" event (e.g.
event.target.value inside the callback function). Use the
num-results property to pass the number of results back to the component.
In the "search and find variant", the user browses the results using the component's arrow buttons, which emit the event
wmSearchBrowseResults. In the callback function, use
event.detail.position to retrieve the position of the result in the list, and set the
highlighted-name properties to the current search result (for accessibility reasons).
* Required property
basic | find
Usage in HTML
Edit the code below to see changes reflected in the example above.
Example code for functionality.
Usage in Elm
Code generated from HTML.
Screen readers announce the number of results
When using the "search and find" version, if there are results and the user is tabbing, the component displays a link to jump to the search result (similar to a "skip navigation" link).
The component doesn't handle the results list; the filtering needs to be implemented, using the information exposed by the component through properties and events. Similarly, in the "search and find" variant, the highlighting needs to be handled outside of the component (for the same reason: the component doesn't have access to the results list).
The component emits an event on "input", not on "change". Make sure the callback function is hooked to the proper event.