Multi-Index Search with InstantSearch.js
You are currently reading the documentation for InstantSearch.js V4. Read our migration guide to learn how to upgrade from V3 to V4. You can still access the V3 documentation for this page.
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 searchBox to search multiple indices. It adds the first hits widget at the top level, while the second one is scoped under an index widget. The second hits widget just displays results from the Algolia index referenced by the index widget that precedes it. The first hits widget displays results from the top level instant_search index.
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
const search = instantsearch({
indexName: 'instant_search',
searchClient,
});
search.addWidgets([
instantsearch.widgets.searchBox({
container: '#searchbox',
}),
instantsearch.widgets.hits({
container: '#hits-instant-search',
templates: {
item:
'{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}',
},
}),
instantsearch.widgets
.index({ indexName: 'instant_search_price_desc' })
.addWidgets([
instantsearch.widgets.hits({
container: '#hits-instant-search-price-desc',
templates: {
item:
'{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}',
},
}),
]),
]);
search.start();
You can scope widget under an index. The following example displays a different number of hits for the two sets of results. The instant_search index displays 8 results and instant_search_price_desc 16 results. To restrict the number of results per page, use the configure widget. Each widget is scoped under the targeted level.
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
const search = instantsearch({
indexName: 'instant_search',
searchClient,
});
search.addWidgets([
instantsearch.widgets.configure({
hitsPerPage: 8,
}),
instantsearch.widgets.searchBox({
container: '#searchbox',
}),
instantsearch.widgets.hits({
container: '#hits-instant-search',
templates: {
item:
'{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}',
},
}),
instantsearch.widgets
.index({ indexName: 'instant_search_price_desc' })
.addWidgets([
instantsearch.widgets.configure({
hitsPerPage: 16,
}),
instantsearch.widgets.hits({
container: '#hits-instant-search-price-desc',
templates: {
item:
'{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}',
},
}),
]),
]);
search.start();
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.
