Guides / Building Search UI / UI & UX patterns

It might happen that you want to search across multiple indices at the same time. React InstantSearch has a built-in solution for this use case, the Index component. The widgets scoped under this Index component will target the provided index. The widgets that are not scoped under an Index are “shared” across all the indices. This widget is really useful whenever you want to:

  • display hits from different indices
  • share a single SearchBox
  • build an autocomplete menu targeting different indices

In this guide we will learn how to share a single SearchBox to display multiple hits from different indices. We will also take a look at how to create an autocomplete that targets multiple indices. The source code of both examples can be found on GitHub.

Search in multiple indices

For this first use case we share a single SearchBox to search into multiple indices. Both Hits widgets are scoped under an Index component. It means that they are 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 on the same index with different parameters), make sure to 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>
);

Not only the Hits widget can be scoped under an Index component, but every widget can be used. In the following example we want to display a different number of results in our two sets of results. instant_search index will display 8 results and instant_search_price_desc 16 results. To restrict the number of results per page we use the Configure widget. Each widget will be scoped under the index that we 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.

Autocomplete

If you need to display multiple result types in an autocomplete, or search in several Algolia indices at a time, you can set up multi-index search with Autocomplete.

You can check the following guide to learn how to do so. Note that even though the guide focuses on a Query Suggestions implementation, you can use it with any kind of sources or Algolia indices.

Did you find this page helpful?