Multi Index Search
On this page
Overview
It might happen that you want to search across multiple indices at the same time. Vue InstantSearch has a built-in solution for searching into multiple indices with an autocomplete component. Another common use case is to display hits from multiple indices at the same time. We don’t have a proper API for this use case but we can synchronize two Vue InstantSearch instance to have the same behavior.
In this guide we will learn how to share a single ais-search-box to display multiple hits from different indices. We will also take a look at how to create an autocomplete that targets multiple indices. The source code of both examples can be found on GitHub.
Hits from multiple indices
For this first use case we share a single ais-search-box to search into multiple indices. For this behavior we use two ais-index widgets. Each of them target a specific index: the first one is instant_search_price_desc and the second is instant_search. The first index widget is implied by the creation of the ais-instant-search widget.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<template>
<div>
<ais-instant-search
:search-client="searchClient"
index-name="instant_search_price_desc"
>
<ais-search-box />
<ais-configure
:restrictSearchableAttributes="['name']"
:hitsPerPage="8"
/>
<ais-hits>
<template slot="item" slot-scope="{ item }">
<h3><ais-highlight :hit="item" attribute="name" /></h3>
<img :src="item.image" />
</template>
</ais-hits>
<hr />
<ais-index index-name="instant_search">
<ais-hits>
<template slot="item" slot-scope="{ item }">
<h3><ais-highlight :hit="item" attribute="name" /></h3>
<img :src="item.image" />
</template>
</ais-hits>
</ais-index>
</ais-instant-search>
</div>
</template>
<script>
import algoliasearch from 'algoliasearch/lite';
export default {
data() {
return {
searchClient: algoliasearch(
'latency',
'6be0576ff61c053d5f9a3225e2a90f76'
),
};
},
};
</script>
Note that since these are two dedicated indices, we can apply different parameters and widgets to the search. You can do it by passing different parameters to ais-configure, or mounting different widgets in each of the ais-index components.
You can find the complete example on GitHub.
autocomplete
For this second use case, we are building an autocomplete that searches into multiple indices. The focus of this guide is on search into multiple indices. We do not cover the autocomplete implementation in depth because it has its own guide. The autocomplete is built with Vue Autosuggest and the ais-autocomplete component. The only difference with the previous guide is how we append the hits to the autocomplete.
The ais-autocomplete widget is able to read from adjacent ais-index widgets; in this case the instant_search_price_desc index. Like in the other guide, we need to transform the results from Algolia into what the vue-autosuggest component expects, except this time we also need to make sure each hit has the same shape so we can avoid adding too much logic in the template itself.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<template>
<div class="container">
<ais-instant-search
:search-client="searchClient"
index-name="instant_search"
>
<ais-configure
:hitsPerPage="5"
:restrictSearchableAttributes="['name']"
/>
<ais-index index-name="instant_search_price_desc" />
<ais-autocomplete>
<template slot-scope="{ currentRefinement, indices, refine }">
<vue-autosuggest
:suggestions="indicesToSuggestions(indices)"
@selected="onSelect"
:input-props="{
style: 'width: 100%',
onInputChange: refine,
placeholder: 'Search here…',
}"
>
<template slot-scope="{ suggestion }">
<ais-highlight
:hit="suggestion.item"
attribute="name"
v-if="suggestion.item.name"
/>
<strong>$ {{ suggestion.item.price }}</strong>
<img :src="suggestion.item.image" />
</template>
</vue-autosuggest>
</template>
</ais-autocomplete>
</ais-instant-search>
</div>
</template>
<script>
import algoliasearch from 'algoliasearch/lite';
import { VueAutosuggest } from 'vue-autosuggest';
export default {
components: { VueAutosuggest },
data() {
return {
searchClient: algoliasearch(
'latency',
'6be0576ff61c053d5f9a3225e2a90f76'
),
};
},
methods: {
onSelect(selected) {
if (selected) {
console.log(selected);
}
},
indicesToSuggestions(indices) {
return indices.map(({ hits }) => ({
data: hits,
}));
},
},
};
</script>
You can find the complete example on GitHub.
