Result

edit

Result

edit

Result

edit

Displays a search result.

Example

edit

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

...

<SearchProvider config={config}>
  {({ results }) => {
    return (
      <div>
        {results.map(result => (
          <Result key={result.id.raw}
            result={result}
            titleField="title"
            urlField="nps_link"
          />
        ))}
      </div>
    );
  }}
</SearchProvider>

Configuring search queries

edit

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.

Properties

edit

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

View customization

edit

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
}) => (
  <li className="sui-result">
    <div className="sui-result__header">
      <h3>
        {/* Maintain onClickLink to correct track click throughs for analytics*/}
        <a onClick={onClickLink} href={result.nps_link.raw}>
          {result.title.snippet}
        </a>
      </h3>
    </div>
    <div className="sui-result__body">
      {/* use 'raw' values of fields to access values without snippets */}
      <div className="sui-result__image">
        <img src={result.image_url.raw} alt="" />
      </div>
      {/* Use the 'snippet' property of fields with dangerouslySetInnerHtml to render snippets */}
      <div
        className="sui-result__details"
        dangerouslySetInnerHTML={{ __html: result.description.snippet }}
      ></div>
    </div>
  </li>
);

<Results resultView={CustomResultView} />;

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.

« Results ResultsPerPage »