Multi-Index Search with React InstantSearch

Multi-index search, or federated search, lets you search multiple data sources at once with the same query and gather results in a single search experience. This is a common pattern when building autocomplete search experiences, but also to offer centralized access to multiple sources of content developed and curated independently.

Multi-index search can also help you achieve complex UIs that display the content of the same index in several ways, for example to surface top-rated items before the list of results.

• 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.

Build a multi-source autocomplete experience

One of the most common use cases of multi-index search is when you’re building an autocomplete experience. For example, you may want to display Query Suggestions together with recent searches, create a multi-column layout mixing facets and item previews, or even dynamically change sources based on the query.

You can use the Autocomplete library in your InstantSearch app to build a dynamic multi-source autocomplete experience. Autocomplete isn’t limited to Algolia indices, so you can even use static sources or fetch data from other APIs.