Search Web Components

Appearance

Indexing the rendered result ​

The recommended way to render results is to let Drupal render them, so the browser builds nothing. A Rendered HTML output field on the index holds each item's HTML in a view mode, e.g., Teaser. The endpoint sends that HTML with each result, and the search-result-element-rendered element prints it.

Why ​

The search runs in the browser and gets its results as JSON. Something has to turn a result into markup. Letting Drupal do it, through the index, means:

  • The markup is Drupal's own: the view mode, the field formatters, and the theme's templates, the same as on the content's page.
  • No JavaScript to write. The alternative, a custom result element, builds the markup in the browser from the indexed fields.

Limits ​

  • Every visitor gets the same markup, rendered as the roles chosen on the field.
  • The index is larger, because the field's text is indexed.
  • When a result is rendered depends on the search server:
    • On Database Search, a result is rendered when the search runs, not when the content is indexed. Each uncached search renders every result on its page.
    • On a server that returns the field's stored value, e.g., Solr with Retrieve result data from Solr on, a result is rendered when the content is indexed. A change to the view mode, a field formatter, or a template shows after a reindex.

The index field and the endpoint ​

  1. On Configuration › Search and metadata › Search API, edit the index and add a Rendered HTML output field. Under User roles, pick the roles the HTML is rendered as, usually Anonymous user. Set Default view mode for Content to the view mode for results, e.g., Teaser.
  2. Index the content again.
  3. On Configuration › Search and metadata › Search API › Endpoints, edit the endpoint. Make sure the field is not checked under Excluded fields. Whether to check Skip extracting (extra) fields from original objects depends on the server:
    • Database Search returns no field values. Leave it unchecked, so the endpoint loads each result and renders the field.
    • A server that returns the field's stored value, e.g., Solr, can have it checked, which skips the loads.
  4. On the same page, under Result elements in the Search Web Components group, click Edit on the row that shows default. Set Displayed with to search-result-element-rendered (the HTML of a result field) and Field to render to the Rendered HTML output field you added in step 1. Click Update, then save the endpoint.

One result element row for All values is enough, because the view mode already gives each bundle its own markup. For a different result element per content type or per listing layout, e.g., a card in Grid, add rows. For how the rows are matched, see Result elements.

The field used for searching and the field used for showing results can be two different fields, e.g., a Rendered HTML output field on the Search index view mode for searching and a second one on the Teaser view mode for showing results. Under the endpoint's Searched fields, pick only the field used for searching.

The alternative ​

A custom result element builds the markup in the browser from indexed fields. It fits results whose markup differs per visitor, or must change without a reindex. For building a custom result element, see custom result elements.

For testing ​

search-result-element-default shows the result as formatted JSON. It is for testing a new endpoint, because it shows which fields the endpoint sends and their values.