connectors connectInfiniteHits

Edit this page

Description

InfiniteHits connector provides the logic to create custom widgets that will render an continuous list of results retrieved from Algolia.

This connector provides a InfiniteHitsRenderingOptions.showMore() function to load next page of matched results.

Usage

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

const makeInfiniteHits= instantsearch.connectors.connectInfiniteHits(
function renderFn(
renderOpts: InfiniteHitsRenderingOptions,
isFirstRendering: boolean) {
// render the custom InfiniteHits widget
} );

const customInfiniteHits = makeInfiniteHits(instanceOpts: CustomInfiniteHitsWidgetOptions);
search.addWidget(customInfiniteHits);

Connector options

InfiniteHitsRenderingOptions

  • hitsArray<Object>

    The aggregated matched hits from Algolia API of all pages.

  • resultsObject

    The complete results response from Algolia API.

  • showMorefunction

    Loads the next page of hits.

  • isLastPageboolean

    Indicates if the last page of hits has been reached.

  • widgetParamsObject

    All original widget options forwarded to the renderFn.

CustomInfiniteHitsWidgetOptions

  • escapeHits[boolean]
    Default value: false

    If true, escape HTML tags from hits[i]._highlightResult.

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

    Function to transform the items passed to the templates.

Example

// custom `renderFn` to render the custom InfiniteHits widget
function renderFn(InfiniteHitsRenderingOptions, isFirstRendering) {
  if (isFirstRendering) {
    InfiniteHitsRenderingOptions.widgetParams.containerNode
      .html('<div id="hits"></div><button id="show-more">Load more</button>');

    InfiniteHitsRenderingOptions.widgetParams.containerNode
      .find('#show-more')
      .on('click', function(event) {
        event.preventDefault();
        InfiniteHitsRenderingOptions.showMore();
      });
  }

  InfiniteHitsRenderingOptions.widgetParams.containerNode.find('#hits').html(
    InfiniteHitsRenderingOptions.hits.map(function(hit) {
      return '<div>' + hit._highlightResult.name.value + '</div>';
    })
  );
};

// connect `renderFn` to InfiniteHits logic
var customInfiniteHits = instantsearch.connectors.connectInfiniteHits(renderFn);

// mount widget on the page
search.addWidget(
  customInfiniteHits({
    containerNode: $('#custom-infinite-hits-container'),
  })
);


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