Components / Library Version 4.10.0

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).

Properties

Examples

API

Accessibility

Notes

* 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.