Components / Library Version 5.2.1

Search

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-id and highlighted-name properties to the current search result (for accessibility reasons).

PropertiesExamplesAPIAccessibilityNotes

* Required property

search-type
basic | find
Variant of the component. Defaults to basic
highlighted-id *
string
Required for the search and find variant only. id of the item currently hightlighted.
highlighted-name *
string
Required for the search and find variant only. Text of the item currently highlighted.
label *
string
The component's label (for accessibility). It may be the same as the placeholder.
num-results *
string
The number of results yielded by the user's query.
placeholder *
string
The placeholder text displayed in the input when it is empty.
value
string
The input's value (text typed by the user), for access by the app.

Usage in HTML

Edit the code below to see changes reflected in the example above.

Javascript Sample

Example code for functionality.

Usage in Elm

Code generated from HTML.
wmSearchBrowseResults
Emitted when the buttons in the search-and-find variant are pressed. The event detail contains a 'position' key representing the order of the item currently highlighted.
wmSearchValueChanged
Emitted on blur when Search's value changes.
input
Emitted when a user types in the input field.

General

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.
Back to Top