Multi-Index Search with React InstantSearch

This version of React InstantSearch has been deprecated in favor of the latest version of 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 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 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.