widgets hits

Edit this page

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

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

const widget = instantsearch.widgets.hits({ container: string|HTMLElement, templates: [HitsTemplates], transformData: [HitsTransforms], cssClasses: [HitsCSSClasses], escapeHits: [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.

  • transformData[HitsTransforms]

    Method to change the object passed to the templates.

  • cssClasses[HitsCSSClasses]

    CSS classes to add.

  • escapeHits[boolean]
    Default value: false

    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.

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

    Template to use for the list of all results. (Canโ€™t be used with item template). This template will receive a complete SearchResults result object, this object contains the key hits that contains all the records retrieved.

HitsTransforms

  • empty[(object) => object]

    Method used to change the object passed to the empty template.

  • item[(object) => object]

    Method used to change the object passed to the item template.

  • allItems[(object) => object]

    Method used to change the object passed to the allItems template.

HitsCSSClasses

  • root[string|Array<string>]

    CSS class to add to the wrapping element.

  • empty[string|Array<string>]

    CSS class to add to the wrapping element when no 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}}}'
    },
    escapeHits: true,
    transformItems: items => items.map(item => item),
  })
);

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