InstantSearch / React / V6 / Guides

Multi-Index Search with React InstantSearch

Deprecated content
This documentation is for a deprecated version of React InstantSearch. Some features and settings may be missing or their usage may have changed. Refer to the documentation for the latest version of React InstantSearch for up-to-date information.

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

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.

Did you find this page helpful?