widgets infiniteHits

Edit this page

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

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

const widget = instantsearch.widgets.infiniteHits({ container: string|HTMLElement, templates: [InfiniteHitsTemplates], showMoreLabel: [string], transformData: [InfiniteHitsTransforms], cssClasses: [InfiniteHitsCSSClasses], escapeHits: [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.

  • showMoreLabel[string]
    Default value: "Show more results"

    label used on the show more button.

  • transformData[InfiniteHitsTransforms]

    Method to change the object passed to the templates.

  • cssClasses[InfiniteHitsCSSClasses]

    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.

InfiniteHitsTemplates

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

    Template used when there are no results.

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

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

InfiniteHitsTransforms

  • empty[function]

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

  • item[function]

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

InfiniteHitsCSSClasses

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

  • showmore[string|Array<string>]

    CSS class to add to the show more button container.

  • showmoreButton[string|Array<string>]

    CSS class to add to the show more button.

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',
      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.