Results
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
Displays all search results.
import { Results } from "@elastic/react-search-ui";
...
<Results titleField="title" urlField="nps_link" />
Certain aspects of search results can be configured in SearchProvider, using the searchQuery configuration, such as term highlighting and search fields. See the Search Query Configuration guide for more information.
| Name | Description |
|---|---|
| className | |
| titleField | Name of field to use as the title from each result. |
| shouldTrackClickThrough | Whether or not to track a clickthrough event when clicked. |
| clickThroughTags | Tags to send to analytics API when tracking clickthrough. |
| urlField | Name of field to use as the href from each result. |
| thumbnailField | Name of field to use for thumbnail image. Should be a valid URL and at least 220px wide. |
| resultView | See Result component customization. |
| view | Used to override the default view for this Component. See View customization below. |
| * | Any other property passed will be passed through and available to use in a Custom View |
A complete guide to view customization can be found in the Customization: Component views and HTML section.
This component accepts two view props: view and resultView. The resultView allows you to customize the individual result items that are displayed. The view prop allows you to customize that wrapper around those results, which by default is simply a ul element.
A separate guide specifically for customizing the Result component can be found here., which can be used for providing a resultView prop.
The following properties are available in the view:
| Name | Description |
|---|---|
| className | Passed through from main component |
| children |
See Results.tsx for an example.