> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Multi-index search

> Searching multiple indices in your InstantSearch.js app.

export const Index = () => <Tooltip tip="An Algolia index is a searchable dataset that consists of records and configuration settings. These settings define how the records are searched and ranked.">
    index
  </Tooltip>;

export const Facet = () => <Tooltip tip="An attribute in your records that lets users filter or group results (for example, by color, brand, or price)." cta="Faceting" href="/doc/guides/managing-results/refine-results/faceting">
    facet
  </Tooltip>;

<div className="not-prose algolia-flavor-switcher">
  <div className="afs-dropdown">
    <div className="afs-trigger" role="button" tabIndex="0" aria-haspopup="listbox">
      <span className="afs-current">JavaScript</span>

      <svg className="afs-chevron lucide lucide-chevron-down" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <path d="m6 9 6 6 6-6" />
      </svg>
    </div>

    <ul className="afs-menu" role="listbox">
      <li role="option" aria-selected="true"><a className="afs-option is-current" href="/doc/guides/building-search-ui/ui-and-ux-patterns/multi-index-search/js"><span className="afs-option-name">JavaScript</span><span className="afs-option-lib">InstantSearch.js</span></a></li>
      <li role="option" aria-selected="false"><a className="afs-option" href="/doc/guides/building-search-ui/ui-and-ux-patterns/multi-index-search/react"><span className="afs-option-name">React</span><span className="afs-option-lib">React InstantSearch</span></a></li>
      <li role="option" aria-selected="false"><a className="afs-option" href="/doc/guides/building-search-ui/ui-and-ux-patterns/multi-index-search/vue"><span className="afs-option-name">Vue</span><span className="afs-option-lib">Vue InstantSearch</span></a></li>
      <li role="option" aria-selected="false"><a className="afs-option" href="/doc/guides/building-search-ui/ui-and-ux-patterns/multi-index-search/ios"><span className="afs-option-name">iOS</span><span className="afs-option-lib">InstantSearch iOS</span></a></li>
      <li role="option" aria-selected="false"><a className="afs-option" href="/doc/guides/building-search-ui/ui-and-ux-patterns/multi-index-search/android"><span className="afs-option-name">Android</span><span className="afs-option-lib">InstantSearch Android</span></a></li>
    </ul>
  </div>
</div>

<Info>
  You are currently reading the documentation for InstantSearch.js v4.
  Read the migration guide to learn [how to upgrade from v3 to v4](/doc/guides/building-search-ui/upgrade-guides/js#upgrade-from-v3-to-v4). You can still access the [V3 documentation for this page](https://algolia.com/old-docs/deprecated/instantsearch/js/v3/guides/multi-index-search/).
</Info>

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](https://www.algolia.com/blog/product/federated-search-types/) 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

## Search multiple indices with InstantSearch

The following demo uses an InstantSearch search box to display hits from two different indices:

<Columns>
  <Card title="Open CodeSandbox" icon="codesandbox" href="https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/instantsearch.js/multi-index-hits">
    Run and edit the Multi-index search example in CodeSandbox.
  </Card>

  <Card title="Explore source code" icon="github" href="https://github.com/algolia/doc-code-samples/tree/master/instantsearch.js">
    Browse the source for the Multi-index search example on GitHub.
  </Card>
</Columns>

This example uses a single [`searchBox`](/doc/api-reference/widgets/search-box/js) to search multiple indices. It adds the first [`hits`](/doc/api-reference/widgets/hits/js) widget at the top level, while the second one is scoped under an [`index`](/doc/api-reference/widgets/index-widget/js) widget. The second `hits` widget just displays results from the Algolia index referenced by the `index` widget that precedes it. The first `hits` widget displays results from the top level `instant_search` index.

<Note>
  All examples in this guide assume you've included InstantSearch.js in your web page from a CDN.
  If, instead, you're using it with a package manager, adjust how you [import InstantSearch.js and its widgets](/doc/guides/building-search-ui/installation/js) for more information.
</Note>

```js JavaScript icon=code theme={"system"}
const search = instantsearch({
  indexName: 'instant_search',
  searchClient,
});

search.addWidgets([
  instantsearch.widgets.searchBox({
    container: '#searchbox',
  }),

  instantsearch.widgets.hits({
    container: '#hits-instant-search',
    templates: {
      item: (hit, { html, components }) => 
        html`<div>${components.Highlight({ hit, attribute: 'name' })}</div>`,
    },
  }),

  instantsearch.widgets
    .index({ indexName: 'instant_search_price_desc' })
    .addWidgets([
      instantsearch.widgets.hits({
        container: '#hits-instant-search-price-desc',
        templates: {
          item: (hit, { html, components }) => 
            html`<div>${components.Highlight({ hit, attribute: 'name' })}</div>`,
        },
      }),
    ]),
]);

search.start();
```

You can scope widgets under an [`index`](/doc/api-reference/widgets/index-widget/js).
The following example displays a different number of hits for the two sets of results.
The `instant_search` index displays 8 results and `instant_search_price_desc` 16 results.
To restrict the number of results per page, use the [`configure`](/doc/api-reference/widgets/configure/js) widget.
Each widget is scoped under the targeted level.

```js JavaScript icon=code theme={"system"}
const search = instantsearch({
  indexName: 'instant_search',
  searchClient,
});

search.addWidgets([
  instantsearch.widgets.configure({
    hitsPerPage: 8,
  }),

  instantsearch.widgets.searchBox({
    container: '#searchbox',
  }),

  instantsearch.widgets.hits({
    container: '#hits-instant-search',
    templates: {
      item: (hit, { html, components }) => 
        html`<div>${components.Highlight({ hit, attribute: 'name' })}</div>`,
    },
  }),

  instantsearch.widgets
    .index({ indexName: 'instant_search_price_desc' })
    .addWidgets([
      instantsearch.widgets.configure({
        hitsPerPage: 16,
      }),

      instantsearch.widgets.hits({
        container: '#hits-instant-search-price-desc',
        templates: {
          item: (hit, { html, components }) => 
            html`<div>${components.Highlight({ hit, attribute: 'name' })}</div>`,
        },
      }),
    ]),
]);

search.start();
```

## Search multiple indices with Autocomplete

You can use the [Autocomplete library](/doc/ui-libraries/autocomplete/introduction/what-is-autocomplete) 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 <Facet /> and item previews, or even dynamically change sources based on the query.

<Info>
  Autocomplete isn't limited to Algolia indices: you can use static sources or fetch data from other APIs.
</Info>

For more information, see [Include multiple result types](/doc/ui-libraries/autocomplete/guides/including-multiple-result-types).

For more information, see:

* [Include multiple result types](/doc/ui-libraries/autocomplete/guides/including-multiple-result-types)
* [Reshape sources](/doc/ui-libraries/autocomplete/guides/reshaping-sources)
* [Create a multi-column layout](/doc/ui-libraries/autocomplete/guides/creating-a-multi-column-layout)

## Category display

Algolia can help you display both category matches and results if you:

* **Add categories to your Query Suggestions** either inline or [listed below a result](/doc/ui-libraries/autocomplete/introduction/sandboxes#search-suggestions-with-categories). For example, you might see the following in your Query Suggestions list "game of thrones in Books"
* **Use multi-index search to display categories from a separate category index.** This is useful if you want to display categories and Query Suggestions at the same time. Clicking such a result typically [redirects](/doc/guides/building-search-ui/ui-and-ux-patterns/redirects/js) to a category page. The following is a sample dataset for a product index and a category index.

### Example product index

```json JSON icon=braces theme={"system"}
[
  {
    "name": "Fashion Krisp",
    "description": "A pair of red shoes with a comfortable fit.",
    "image": "/fashion-krisp.jpg",
    "price": 18.98,
    "likes": 284,
    "category": "Fashion > Women > Shoes > Court shoes"
  },
  {
    "name": "Jiver",
    "description": "A blue shirt made of cotton.",
    "image": "/jiver.jpg",
    "price": 17.70,
    "likes": 338,
    "category": "Fashion > Men > Shirts > Dress shirt"
  }
]
```

### Example category index

```json JSON icon=braces theme={"system"}
[
  {
    "name": "Court shoes",
    "category": "Fashion > Women > Shoes > Court shoes",
    "description": "A dress shoe with a low-cut front and a closed heel.",
    "url": "/women/shoes/court/"
  },
  {
    "name": "Dress shirt",
    "category": "Fashion > Men > Shirts > Dress shirt",
    "description": "A long-sleeved, button-up formal shirt that is typically worn with a suit or tie.",
    "url": "/men/shirts/dress/"
  }
]
```