Multi-Index Search with React InstantSearch
We released React InstantSearch Hooks, a new InstantSearch library for React. We recommend using React InstantSearch Hooks in new projects or upgrading from React 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 SearchBox to search multiple indices. Two Hits widgets are scoped under an Index component. It means that they’re restricted to display results from this particular index. In the first case the instant_search and in the second case instant_search_price_desc.
If you want to perform a multi-index search on the same index, for example, to trigger several searches with different parameters, define the indexId property on your Index widgets.
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
import algoliasearch from 'algoliasearch/lite';
import {
InstantSearch,
Index,
SearchBox,
Hits
} from 'react-instantsearch-dom';
const searchClient = algoliasearch(
'latency',
'6be0576ff61c053d5f9a3225e2a90f76'
);
const App = () => (
<InstantSearch indexName="instant_search" searchClient={searchClient}>
<SearchBox />
<Index indexName="instant_search">
<h2>index: instant_search</h2>
<Hits />
</Index>
<Index indexName="instant_search_price_desc">
<h2>index: instant_search_price_desc</h2>
<Hits />
</Index>
</InstantSearch>
);
You can scope any widget under an Index component. The following example displays a different number of results in the two sets of results. 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 index that you want to target.
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
import algoliasearch from 'algoliasearch/lite';
import {
InstantSearch,
Index,
Configure,
SearchBox,
Hits
} from 'react-instantsearch-dom';
const searchClient = algoliasearch(
'latency',
'6be0576ff61c053d5f9a3225e2a90f76'
);
const App = () => (
<InstantSearch indexName="instant_search" searchClient={searchClient}>
<SearchBox />
<Index indexName="instant_search">
<h2>index: instant_search</h2>
<Configure hitsPerPage={8} />
<Hits />
</Index>
<Index indexName="instant_search_price_desc">
<h2>index: instant_search_price_desc</h2>
<Configure hitsPerPage={16} />
<Hits />
</Index>
</InstantSearch>
);
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.
