API Reference / InstantSearch.js Widgets / infiniteHits
Apr. 11, 2019

infiniteHits

Widget signature
instantsearch.widgets.infiniteHits({
  container: string|HTMLElement,
  // Optional parameters
  escapeHTML: boolean ,
  templates: object ,
  cssClasses: object ,
  transformItems: function ,
});

About this widget

The infiniteHits widget is used to display a list of results with a “Show more” button.

To configure the number of hits to show, use the hitsPerPage widget or the configure widget.

Examples

1
2
3
4
5
6
7
8
9
10
11
instantsearch.widgets.infiniteHits({
  container: '#infinite-hits',
  templates: {
    item: `
      <h2>
        {{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}
      </h2>
      <p>{{ description }}</p>
    `,
  },
});

Options

container
type: string|HTMLElement
Required

The CSS Selector or HTMLElement to insert the widget into.

1
2
3
instantsearch.widgets.infiniteHits({
  container: '#infinite-hits',
});
escapeHTML
type: boolean
default: true
Optional

Escapes HTML entities from hits string values.

1
2
3
4
instantsearch.widgets.infiniteHits({
  // ...
  escapeHTML: false,
});
templates
type: object
Optional

The templates to use for the widget.

1
2
3
4
5
6
instantsearch.widgets.infiniteHits({
  // ...
  templates: {
    // ...
  },
});
cssClasses
type: object
default: {}
Optional

The CSS classes to override.

  • root: the root element of the widget.
  • emptyRoot: the root container without results.
  • list: the list of results.
  • item: the list item.
  • loadMore: the “Show more” button.
  • disabledLoadMore: the disabled “Show more” button.
1
2
3
4
5
6
7
8
9
10
instantsearch.widgets.infiniteHits({
  // ...
  cssClasses: {
    root: 'MyCustomInfiniteHits',
    list: [
      'MyCustomInfiniteHits',
      'MyCustomInfiniteHits--subclass',
    ],
  },
});
transformItems
type: function
default: x => x
Optional

Receives the items, and is called before displaying them. Should return a new array with the same shape as the original array. Useful for mapping over the items to transform, and remove or reorder them.

1
2
3
4
5
6
7
8
9
instantsearch.widgets.infiniteHits({
  // ...
  transformItems(items) {
    return items.map(item => ({
      ...item,
      name: item.name.toUpperCase(),
    }));
  },
});

Templates

empty
type: string|function
Optional

The template to use when there are no results. It exposes the results object.

1
2
3
4
5
6
instantsearch.widgets.infinteHits({
  // ...
  templates: {
    empty: 'No results for <q>{{ query }}</q>',
  },
});
item
type: string|function
Optional

The template to use for each result. This template receives an object containing a single record. The record has a new property __hitIndex for the relative position of the record in the list of displayed hits. You can leverage the highlighting feature of Algolia through the highlight function, directly from the template.

1
2
3
4
5
6
7
8
9
10
11
12
instantsearch.widgets.infiniteHits({
  // ...
  templates: {
    item: `
      <h2>
        {{ __hitIndex }}:
        {{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}
      </h2>
      <p>{{ description }}</p>
    `,
  },
});
showMoreText
type: string|function
Optional

The template to use for the “Show more” label.

1
2
3
4
5
6
instantsearch.widgets.infiniteHits({
  // ...
  templates: {
    showMoreText: 'Show more',
  },
});

Customize the UI - connectInfiniteHits

If you want to create your own UI of the infiniteHits widget, you can use connectors.

It’s a 3-step process:

// 1. Create a render function
const renderInfiniteHits = (renderOptions, isFirstRender) => {
  // Rendering logic
};

// 2. Create the custom widget
const customInfiniteHits = instantsearch.connectors.connectInfiniteHits(
  renderInfiniteHits
);

// 3. Instantiate
search.addWidget(
  customInfiniteHits({
    // instance params
  })
);

Create a render function

This rendering function is called before the first search (init lifecycle step) and each time results come back from Algolia (render lifecycle step).

const renderInfiniteHits = (renderOptions, isFirstRender) => {
  const {
    object[] hits,
    object results,
    boolean isLastPage,
    function showMore,
    object widgetParams,
  } = renderOptions;

  if (isFirstRender) {
    // Do some initial rendering and bind events
  }

  // Render the widget
}

Rendering options

hits
type: object[]

The matched hits from the Algolia API. You can leverage the highlighting feature of Algolia through the highlight function, directly from the connector’s render function.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const renderInfiniteHits = (renderOptions, isFirstRender) => {
  const { hits } = renderOptions;

  document.querySelector('#infinite-hits').innerHTML = `
    <ul>
      ${hits
        .map(
          item =>
            `<li>
              ${instantsearch.highlight({ attribute: 'name', hit: item })}
            </li>`
        )
        .join('')}
    </ul>
  `;
};
results
type: object

The complete response from the Algolia API. It contains the hits but also metadata about the page, number of hits, etc. We recommend using hits rather than this option. You can also take a look at the stats widget if you want to build a widget that displays metadata about the search.

1
2
3
4
5
6
7
8
9
10
11
12
13
const renderInfiniteHits = (renderOptions, isFirstRender) => {
  const { results } = renderOptions;

  if (isFirstRender) {
    return;
  }

  document.querySelector('#infinite-hits').innerHTML = `
    <ul>
      ${results.hits.map(item => `<li>${item.name}</li>`).join('')}
    </ul>
  `;
};
isLastPage
type: boolean

Indicates if the last page of hits has been reached.

1
2
3
4
5
6
7
8
9
10
11
12
const renderInfiniteHits = (renderOptions, isFirstRender) => {
  const { hits, isLastPage } = renderOptions;

  document.querySelector('#infinite-hits').innerHTML = `
    <ul>
      ${hits.map(item => `<li>${item.name}</li>`).join('')}
    </ul>
    <button ${isLastPage ? 'disabled' : ''}>
      Static "Show more" button
    </button>
  `;
};
showMore
type: function

Loads the next page of hits.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const renderInfiniteHits = (renderOptions, isFirstRender) => {
  const { hits, showMore } = renderOptions;
  const container = document.querySelector('#infinite-hits');

  if (isFirstRender) {
    const ul = document.createElement('ul');
    const button = document.createElement('button');
    button.textContent = 'Show more';

    button.addEventListener('click', () => {
      showMore();
    });

    container.appendChild(ul);
    container.appendChild(button);

    return;
  }

  container.querySelector('ul').innerHTML = `
    ${hits.map(item => `<li>${item.name}</li>`).join('')}
  `;
};
widgetParams
type: object

All original widget options forwarded to the render function.

1
2
3
4
5
6
7
8
9
10
11
12
13
const renderInfiniteHits = (renderOptions, isFirstRender) => {
  const { widgetParams } = renderOptions;

  widgetParams.container.innerHTML = '...';
};

// ...

search.addWidget(
  customInfiniteHits({
    container: document.querySelector('#infinite-hits'),
  })
);

Create and instantiate the custom widget

We first create custom widgets from our rendering function, then we instantiate them. When doing that, there are two types of parameters you can give:

  • Instance parameters: they are predefined parameters that you can use to configure the behavior of Algolia.
  • Your own parameters: to make the custom widget generic.

Both instance and custom parameters are available in connector.widgetParams, inside the renderFunction.

const customInfiniteHits = instantsearch.connectors.connectInfiniteHits(
  renderInfiniteHits
);

search.addWidget(
  customInfiniteHits({
    // Optional parameters
    escapeHTML: boolean,
    transformItems: function,
  })
);

Instance options

escapeHTML
type: boolean
default: true
Optional

Escapes HTML entities from hits string values.

1
2
3
customInfiniteHits({
  escapeHTML: false,
});
transformItems
type: function
default: x => x
Optional

Receives the items, and is called before displaying them. Should return a new array with the same shape as the original array. Useful for mapping over the items to transform, and remove or reorder them.

1
2
3
4
5
6
7
8
customInfiniteHits({
  transformItems(items) {
    return items.map(item => ({
      ...item,
      name: item.name.toUpperCase(),
    }));
  },
});

Full example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// Create the render function
const renderInfiniteHits = (renderOptions, isFirstRender) => {
  const { hits, showMore, isLastPage, widgetParams } = renderOptions;

  if (isFirstRender) {
    const ul = document.createElement('ul');
    const button = document.createElement('button');
    button.textContent = 'Show more';

    button.addEventListener('click', () => {
      showMore();
    });

    widgetParams.container.appendChild(ul);
    widgetParams.container.appendChild(button);

    return;
  }

  widgetParams.container.querySelector('button').disabled = isLastPage;

  widgetParams.container.querySelector('ul').innerHTML = `
    ${hits
      .map(
        item =>
          `<li>
            ${instantsearch.highlight({ attribute: 'name', hit: item })}
          </li>`
      )
      .join('')}
  `;
};

// Create the custom widget
const customInfiniteHits = instantsearch.connectors.connectInfiniteHits(
  renderInfiniteHits
);

// Instantiate the custom widget
search.addWidget(
  customInfiniteHits({
    container: document.querySelector('#infinite-hits'),
  })
);

HTML output

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="ais-InfiniteHits">
  <ol class="ais-InfiniteHits-list">
    <li class="ais-InfiniteHits-item">
      ...
    </li>
    <li class="ais-InfiniteHits-item">
      ...
    </li>
    <li class="ais-InfiniteHits-item">
      ...
    </li>
  </ol>
  <button class="ais-InfiniteHits-loadMore">
    Show more
  </button>
</div>

Did you find this page helpful?