widgets hits

Description

Display the list of results (hits) from the current search.

This is a traditional display of the hits. It has to be implemented together with a pagination widget, to let the user browse the results beyond the first page.

Live example

You can find an example at the end of the page or a live example in our widget showcase.

Usage

const search = instantsearch( /* parameters */ );

const widget = instantsearch.widgets.hits({ 
  container: string|HTMLElement, 
  templates: [HitsTemplates], 
  cssClasses: [HitsCSSClasses], 
  escapeHTML: [boolean], 
  transformItems: [(Array<object>) => Array<object>], 
}: HitsWidgetOptions);

search.addWidget(widget);

Options

HitsWidgetOptions

• containerstring|HTMLElement

  CSS Selector or HTMLElement to insert the widget.

• templates[HitsTemplates]

  Templates to use for the widget.

• cssClasses[HitsCSSClasses]

  CSS classes to add.

• escapeHTML[boolean]
  Default value: true

  Escape HTML entities from hits string values.

• transformItems[(Array<object>) => Array<object>]

  Function to transform the items passed to the templates.

HitsTemplates

• empty[string|(object) => string]
  Default value: ''

  Template to use when there are no results.

• item[string|(object) => string]
  Default value: ''

  Template to use for each result. This template will receive an object containing a single record. The record will have a new property __hitIndex for the position of the record in the list of displayed hits.

HitsCSSClasses

• root[string|Array<string>]

  CSS class to add to the wrapping element.

• emptyRoot[string|Array<string>]

  CSS class to add to the wrapping element when no results.

• list[string|Array<string>]

  CSS class to add to the list of results.

• item[string|Array<string>]

  CSS class to add to each result.

Widget

• render[function]

  Called after each search response has been received

• getConfiguration[function]

  Let the widget update the configuration of the search with new parameters

• init[function]

  Called once before the first search

Example

search.addWidget(
  instantsearch.widgets.hits({
    container: '#hits-container',
    templates: {
      empty: 'No results',
      item: '<strong>Hit {{objectID}}</strong>: {{{_highlightResult.name.value}}}'
    },
    transformItems: items => items.map(item => item),
  })
);

Can't find what you are looking for? Open an issue, we'll get back to you.