API Reference / Vue InstantSearch Widgets / ais-hits-per-page
Apr. 24, 2019

ais-hits-per-page

Widget signature 
<ais-hits-per-page
  :items="object[]"
  // Optional parameters
  :transform-items="function"
  :class-names="object"
/>
See code examples
See Live example

About this widget

The ais-hits-per-page widget displays a select element to let the user change the number of displayed hits.

If you only want to configure the number of hits per page without displaying a widget, you can use the ais-configure widget with the hitsPerPage search parameter.

Examples

Copy
1
2
3
4
5
6

<ais-hits-per-page
  :items="[
    { label: '8 hits per page', value: 8, default: true },
    { label: '16 hits per page', value: 16 },
  ]"
/>

Props

items
type: object[]
Required

The list of available options, with each item:

  • label: string: the label to display in the option.
  • value: number: the number of hits to display per page.
  • default: boolean: whether it’s the default hits per page on first search.
Copy
1
2
3
4
5
6

<ais-hits-per-page
  :items="[
    { label: '8 hits per page', value: 8, default: true },
    { label: '16 hits per page', value: 16 },
  ]"
/>
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.
Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<template>
  <!-- ... -->
  <ais-hits-per-page
    [...]
    :transform-items="transformItems"
  />
</template>

<script>
  export default {
    methods: {
      transformItems(items) {
        return items.map(item => ({
          ...item,
          label: item.label.toUpperCase(),
        }));
      },
    },
  };
</script>
class-names
type: object
default: {}
Optional

The CSS classes to override.

  • ais-HitsPerPage: the root of the widget.
  • ais-HitsPerPage-select: the select element.
  • ais-HitsPerPage-option: the option element of the select.
Copy
1
2
3
4
5
6
7
8

<ais-hits-per-page
  [...]
  :class-names="{
    'ais-HitsPerPage': 'MyCustomHitsPerPage',
    'ais-HitsPerPage-select': 'MyCustomHitsPerPageSelect',
    // ...
  }"
/>

Customize the UI

default

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

Scope

  • items: object[]: the list of items the widget can display.
  • hasNoResults: boolean: whether or not the search got results.
  • refine: (value: number) => void: the function to call with the next value of hits per page.
  • createURL: (value: number) => void: the function to call with the next value of hits per page.

Where each item is an object containing:

  • label: string: the label to display in the option.
  • value: number: the number of hits to display per page.
  • isRefined: boolean: indicates if the item is the current refined value.
Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<ais-hits-per-page
  :items="[
    { label: '8 hits per page', value: 8, default: true },
    { label: '16 hits per page', value: 16 },
  ]"
>
  <ul slot-scope="{ items, refine, createURL }">
    <li v-for="item in items" :key="item.value">
      <a
        :href="createURL(item.value)"
        :style="{ fontWeight: item.isRefined ? 'bold' : '' }"
        @click.prevent="refine(item.value)"
      >
        {{ item.label }}
      </a>
    </li>
  </ul>
</ais-hits-per-page>

HTML output

Copy
1
2
3
4
5
6

<div class="ais-HitsPerPage">
  <select class="ais-HitsPerPage-select">
    <option class="ais-HitsPerPage-option" value="8">8 per page</option>
    <option class="ais-HitsPerPage-option" value="16">16 per page</option>
  </select>
</div>

Did you find this page helpful?

Vue InstantSearch v2