Loading

Result

Elastic Stack Serverless

Displays a search result.

import { Result } from "@elastic/react-search-ui";

...


  {({ results }) => {
    return (
      

        {results.map(result => (
          
        ))}
      

    );
  }}

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.
result Type: SearchResult. An object representing the search result to render.
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.

Example:

const CustomResultView = ({
  result,
  onClickLink
}: {
  result: SearchResult,
  onClickLink: () => void
}) => (
  
  • 
    
    
      
    
        {/* Maintain onClickLink to correct track click throughs for analytics*/}
        
          {result.title.snippet}
        
      
    
    
    
    
    
      {/* use 'raw' values of fields to access values without snippets */}
      
    
        
      
    
      {/* Use the 'snippet' property of fields with dangerouslySetInnerHtml to render snippets */}
      
    
    
    
  
    • 
);

;

    The following properties are available in the view:

    Name Description
    className Passed through from main component.
    result Type: SearchResult. An object representing the search result to render.
    onClickLink function() - Call this when a link is clicked to trigger click tracking. Only triggered if shouldTrackClickThrough was set to true on the main component.
    titleField Passed through from main component. Not usually needed for custom views.
    urlField Passed through from main component. Not usually needed for custom views.
    thumbnailField Passed through from main component. Not usually needed for custom views.

    See Result.tsx for an example.