InstantSearch specs

✏️ edit page

InfiniteHits

Widget example

  1. Hit 5477500: Amazon - Fire TV Stick with Alexa Voice Remote - Black
  2. Hit 4397400: Google - Chromecast - Black
  3. Hit 4397400: Google - Chromecast - Black
  4. Hit 5477500: Amazon - Fire TV Stick with Alexa Voice Remote - Black
  5. Hit 4397400: Google - Chromecast - Black
  6. Hit 4397400: Google - Chromecast - Black
  7. Hit 5477500: Amazon - Fire TV Stick with Alexa Voice Remote - Black
  8. Hit 4397400: Google - Chromecast - Black

HTML output

<div class="ais-InfiniteHits">
  <ol class="ais-InfiniteHits-list">
    <li class="ais-InfiniteHits-item">
      Hit 5477500: Amazon - Fire TV Stick with Alexa Voice Remote - Black
    </li>
    <li class="ais-InfiniteHits-item">
      Hit 4397400: Google - Chromecast - Black
    </li>
    <li class="ais-InfiniteHits-item">
      Hit 4397400: Google - Chromecast - Black
    </li>
    <li class="ais-InfiniteHits-item">
      Hit 5477500: Amazon - Fire TV Stick with Alexa Voice Remote - Black
    </li>
    <li class="ais-InfiniteHits-item">
      Hit 4397400: Google - Chromecast - Black
    </li>
    <li class="ais-InfiniteHits-item">
      Hit 4397400: Google - Chromecast - Black
    </li>
    <li class="ais-InfiniteHits-item">
      Hit 5477500: Amazon - Fire TV Stick with Alexa Voice Remote - Black
    </li>
    <li class="ais-InfiniteHits-item">
      Hit 4397400: Google - Chromecast - Black
    </li>
  </ol>
  <button class="ais-InfiniteHits-loadMore">Show more results</button>
</div>

CSS classes

Hint: hover classes below to see their position.

name description
.ais-InfiniteHits the root div of the widget
.ais-InfiniteHits-list the list of hits
.ais-InfiniteHits-item the hit list item
.ais-InfiniteHits-loadPrevious the button used to display previous results
.ais-InfiniteHits-loadPrevious--disabled the disabled button used to display previous results
.ais-InfiniteHits-loadMore the button used to display more results
.ais-InfiniteHits-loadMore--disabled the disabled button used to display more results

Options

Note: this is a guideline for new InstantSearch flavours, not a rule.

name default value description
transformItems Function which receives the items, which will be 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, remove or reorder them
escapeHTML Escape raw HTML in the hits

Translations

Note: this is a guideline for new InstantSearch flavours, not a rule.

name default value description
showPreviousButtonText "Load previous page" The text for the “Show previous” button.
showMoreButtonText "Load next page" The text for the “Show more” button.