Multi-Index Search with React InstantSearch
Multi-index search (federated search) is a method for searching multiple data sources simultaneously. This means that when users enter a search term, Algolia will look for and display results from all these data sources.
This doesn’t necessarily mean that the results from Algolia indices are combined since their contents could be quite different. Your approach may be to display the results from each index separately. You could display the top-rated items from a movie index alongside the list of results from a book index. Or you could display category matches alongside the list of results from a product index
- Synchronize two InstantSearch indices and share a single search box to display multiple hits from different indices.
- Use Autocomplete to target multiple indices
Synchronize two InstantSearch indices
This example uses a single search-box
to search multiple indices. Two hits
widgets are scoped under an index-widget
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-widget
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 { liteClient as 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-widget
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 { liteClient as 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.
Search multiple indices with Autocomplete
You can use the Autocomplete library in your InstantSearch app to build a dynamic multi-source search experience. For example, you may want to display Query Suggestions together with recent searches, create a multi-column layout that mixes facets and item previews, or even dynamically change sources based on the query.
Autocomplete isn’t limited to Algolia indices: you can use static sources or fetch data from other APIs.