ais-hits
<ais-hits // Optional parameters :escapeHTML="boolean" :class-names="object" :transform-items="function" />
1
2
3
4
5
6
7
8
9
import { AisHits } from 'vue-instantsearch';
// Use 'vue-instantsearch/vue3/es' for Vue 3
export default {
components: {
AisHits
},
// ...
};
1. Follow additional steps in Optimize build size to ensure your code is correctly bundled.
2. This imports all the widgets, even the ones you don’t use. Read the Getting started guide for more information.
About this widget
Use the ais-hits
widget 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.
For guidance on how to search across more than one index, read the multi-index search guide.
If there are no hits, you should display a message to users and clear filters so they can start over.
Examples
1
<ais-hits />
Props
escapeHTML
|
type: boolean
default: true
Optional
Whether to escape HTML entities from hits string values. |
||
Copy
|
|||
class-names
|
type: object
default: {}
Optional
The CSS classes you can override:
|
||
Copy
|
|||
transform-items
|
type: function
default: items => items
Optional
Receives the items and is called before displaying them.
It returns a new array with the same “shape” as the original.
This is helpful when transforming or reordering items.
Don’t use The entire If you’re transforming an attribute with the When using an array, take steps to avoid creating infinite loops. When you use an array as a prop, it causes the widget to re-register on every render, and this can sometimes cause these infinite loops. |
||
Copy
|
Customize the UI
default
|
The slot to override the complete DOM output of the widget. When you implement this slot, none of the other slots will change the output, as the default slot surrounds them. Scope
|
||
Copy
|
|||
item
|
The slot to override the DOM output of the item. Scope
|
||
Copy
|
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>
Click and conversion events
If the insights
option is true
, the ais-hits
widget automatically sends a click
event with the following “shape” to the Insights API whenever the end user clicks on a hit.
1
2
3
4
5
6
7
8
9
{
eventType: 'click',
insightsMethod: 'clickedObjectIDsAfterSearch',
payload: {
eventName: 'Hit Clicked',
// …
},
widgetType: 'ais.hits',
}
To customize this event, use the sendEvent
function in your item
slot and send a custom click
event on the root element.
1
2
3
4
5
6
7
8
9
10
<ais-hits>
<template v-slot:item="{ item, sendEvent }">
<div @click="sendEvent('click', item, 'Product Clicked')">
<h2>
<ais-highlight attribute="name" :hit="item" />
</h2>
<p>{{ item.description }}</p>
</div>
</template>
</ais-hits>