Using search-as-you-type
Elastic Cloud Serverless projects are autoscaled environments, fully managed by Elastic and available on Elastic Cloud. Availability This functionality is generally available and ready for production usage. Serverless interfaces and procedures might differ from classic Elastic Stack deployments. The Elastic Stack includes Elastic's core products such as Elasticsearch, Kibana, Logstash, and Beats. Availability This functionality is generally available and ready for production usage. Unless stated otherwise on the page, this functionality is available when your Elastic Stack is deployed on Elastic Cloud Hosted, Elastic Cloud Enterprise, Elastic Cloud on Kubernetes, and self-managed environments. This documentation corresponds to the latest patch available for each minor version. If you're not using the latest patch, check the release notes for changes.
Serverless
Generally available
Stack
Generally available
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 how search-as-you-type works in our CodeSandbox demo.
Related documentation: