Multi-Index Search with Vue InstantSearch
If you want to search multiple indices, there are a couple of approaches you can take:
- Synchronize two InstantSearch indices and share a single search box to display multiple hits from different indices.
- Use Autocomplete to target multiple indices.
The source code for both examples is on GitHub.
Synchronize two InstantSearch indices
This example uses a single ais-search-box to search multiple indices. For this behavior, there are 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.
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 v-slot:item="{ 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 v-slot:item="{ 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>
Since these are two dedicated indices, you 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.
Use Autocomplete
Suppose you need to display multiple result types in an Autocomplete or search in several Algolia indices at a time. In that case, you can set up a multi-index search with Autocomplete.
Check out the Autocomplete guide for more information. Even though the guide focuses on a query suggestions implementation, you can use it with any source or Algolia indices.
