API Reference / Vue InstantSearch Widgets / ais-hits
Apr. 11, 2019
Widget signature
<ais-hits
  // Optional parameters
  :escapeHTML="boolean"
  :class-names="object"
  :transform-items="function"
/>

About this widget

The ais-hits is used to display a list of results.

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

Examples

1
<ais-hits />

Props

escapeHTML
type: boolean
default: true
Optional

Whether to escape HTML entities from hits string values.

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

The CSS classes to override.

  • ais-Hits: the root element of the widget.
  • ais-Hits-list: the list of results.
  • ais-Hits-item: the list items.
1
2
3
4
5
6
7
<ais-hits
  :class-names="{
    'ais-Hits': 'MyCustomHits',
    'ais-Hits-list': 'MyCustomHitsList',
    // ...
  }"
/>
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-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.
1
2
3
4
5
6
7
<ais-hits>
  <ul slot-scope="{ items }">
    <li v-for="item in items" :key="item.objectID">
      {{ item.name }}
    </li>
  </ul>
</ais-hits>
item

The slot to override the DOM output of the item.

Scope

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

HTML output

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="ais-Hits">
  <ol class="ais-Hits-list">
    <li class="ais-Hits-item">
      ...
    </li>
    <li class="ais-Hits-item">
      ...
    </li>
    <li class="ais-Hits-item">
      ...
    </li>
  </ol>
</div>

Did you find this page helpful?