API Reference / Vue InstantSearch Widgets / ais-infinite-hits
Apr. 11, 2019

ais-infinite-hits

Widget signature
<ais-infinite-hits
  // Optional parameters
  :escapeHTML="boolean"
  :class-names="object"
  :transform-items="function"
/>

About this widget

The ais-infinite-hits widget is used to display a list of results with a “Show more” button.

To configure the number of hits to show, use the ais-hits-per-page widget or the ais-configure widget.

Examples

1
<ais-infinite-hits />

Props

escapeHTML
type: boolean
default: true
Optional

Whether to escape the raw HTML in the hits.

1
<ais-infinite-hits :escapeHTML="false" />
class-names
type: object
default: {}
Optional

The CSS classes to override.

  • ais-InfiniteHits: the root element of the widget.
  • ais-InfiniteHits-list: the list of results.
  • ais-InfiniteHits-item: the list items.
  • ais-InfiniteHits-loadMore: the button to display more results.
  • ais-InfiniteHits-loadMore--disabled: the disabled button to display more results.
1
2
3
4
5
6
7
<ais-infinite-hits
  :class-names="{
    'ais-InfiniteHits': 'MyCustomInfiniteHits',
    'ais-InfiniteHits-list': 'MyCustomInfiniteHitsList',
    // ...
  }"
/>
transform-items
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
10
11
12
13
14
15
16
17
<template>
  <!-- ... -->
  <ais-infinite-hits :transform-items="transformItems" />
</template>

<script>
  export default {
    methods: {
      transformItems(items) {
        return items.map(item => ({
          ...item,
          name: item.name.toUpperCase(),
        }));
      },
    },
  };
</script>

Customize the UI

default

The slot to override the complete DOM output of the widget.

Scope

  • items: object[]: the records that matched the search.
  • refine: () => void: the function to load more results.
1
2
3
4
5
6
7
8
9
10
11
12
<ais-infinite-hits>
  <ul slot-scope="{ items, refine }">
    <li v-for="item in items" :key="item.objectID">
      {{ item.name }}
    </li>
    <li>
      <button @click="refine">
        Show more results
      </button>
    </li>
  </ul>
</ais-infinite-hits>
item

The slot to override the DOM output of the item.

Scope

  • items: object: a single hit with all its attribute.
  • index: number: the relative position of the hit in the list.
1
2
3
4
5
<ais-infinite-hits>
  <div slot="item" slot-scope="{ item, index }">
    {{ index }} - {{ item.name }}
  </div>
</ais-infinite-hits>
loadMore

The slot to override the DOM output of the “Show more” button.

Scope

  • page: number: the value of the current page.
  • isLastPage: number: whether it’s the last page.
  • refine: () => void: the function to load the next page.
1
2
3
4
5
6
7
8
9
10
<ais-infinite-hits>
  <button
    slot="loadMore"
    slot-scope="{ page, isLastPage, refine }"
    :disabled="isLastPage"
    @click="refine"
  >
    Show more results (page: {{ page + 1 }})
  </button>
</ais-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 results
  </button>
</div>

Did you find this page helpful?