2 min read

SearchInput

This component renders an input field that allows the user to type a query. It also reacts to query changes through event listening.

Props

Name	Description	Type	Default
`maxLength`	Maximum characters allowed in the input search.	`number`	`64`
`autofocus`	Allows input autofocus when the search field is rendered.	`boolean`	`true`
`instant`	Enables the auto-accept query after debounce.	`boolean`	`true`
`instantDebounceInMs`	Debounce time for the instant.	`number`	`500`
`autocompleteKeyboardKeys`	Keyboard keys to accept the autocomplete suggestion.	`Array`	`() => ['ArrowRight']`
`autocompleteSuggestionsEvent`	Event that retrieves the autocomplete suggestion.	`PropsWithType`	`'QuerySuggestionsChanged'`

Events

This component emits the following events:

See it in action

Backend service required

To use this component, the Search service must be implemented.

Here you have a basic example of how the search input is rendered.

Type any term in the input field to try it out!

Play with props

In this example, the search input has been limited to accept a maximum of 5 characters, including spaces, it won't take the focus when it is rendered, and it will emit the UserAcceptedAQuery event after 1000 milliseconds without typing.

Type a term with more than 5 characters to try it out!

Play with events

In this example, a message has been added below the search input to illustrate the action performed. For example, if you select the search input box, the message “focus” appears. When you start to enter a search term, the message “typing” appears. If you press Enter after typing a search term, the message “enter” appears.

X Events are only emitted from the root X Component.

At the moment, X Events are only emitted from the root X Component. This means that if you wrap the SearchInput with another component of another module like the MainScroll, you should add the listeners to the MainScroll instead of the SearchInput. If you need to subscribe to these events, it is recommended to use the GlobalXBus component instead.

Type any term in the input field to try it out!

Extending the component

Components can be combined and communicate with each other. Commonly, the SearchInput component communicates with the SearchButton and the ClearSearchInput to offer a full query entry experience. Furthermore, you can use it together with the QuerySuggestions component to autocomplete the typed search term.

Type “trousers” or another fashion term in the input field and then click the clear icon to try it out!