widgets infiniteHits

Description

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

This widget uses the infinite hits pattern. It contains a button that will let the user load more results to the list. This is particularly handy on mobile implementations.

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.infiniteHits({ 
  container: string|HTMLElement, 
  templates: [InfiniteHitsTemplates], 
  cssClasses: [InfiniteHitsCSSClasses], 
  escapeHTML: [boolean], 
  transformItems: [(Array<object>) => Array<object>], 
}: InfiniteHitsWidgetOptions);

search.addWidget(widget);

Options

InfiniteHitsWidgetOptions

• containerstring|HTMLElement

  CSS Selector or HTMLElement to insert the widget.

• templates[InfiniteHitsTemplates]

  Templates to use for the widget.

• cssClasses[InfiniteHitsCSSClasses]

  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.

InfiniteHitsTemplates

• empty[string|function]
  Default value: "No results"

  Template used when there are no results.

• showMoreText[string|function]
  Default value: "Show more results"

  Template used for the “load more” button.

• item[string|function]
  Default value: ""

  Template used for each result. This template will receive an object containing a single record.

InfiniteHitsCSSClasses

• 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.

• loadMore[string|Array<string>]

  CSS class to add to the load more button.

• disabledLoadMore[string|Array<string>]

  CSS class to add to the load more button when disabled.

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.infiniteHits({
    container: '#infinite-hits-container',
    templates: {
      empty: 'No results',
      showMoreText: 'Show more 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.