Using search-as-you-type

Usually, the search query is executed when the user presses the enter key or clicks the search button.

Search-as-you-type feature allows search queries to be executed on every keystroke.

To implement this in Search UI, you’ll need to add a searchAsYouType={true} prop to <SearchBox/> component.

It’s a good idea to add a debounce time — the Search UI will wait for users to finish typing before issuing the request. You can do it by adding a debounceLength={300} prop to <SearchBox/> component.

See the example implementation below.