index

Signature

index({
  indexName: string,
  // Optional parameters
  indexId: string,
});

See code examples

See live example

About this widget

This widget lets you apply widgets to a specific index. This is useful when you want to build an interface that targets multiple indices.

You can learn more about this pattern, called “Federated Search”, in the guides on multi-index search.

The position of index in the widgets tree impacts which search parameters apply. Widgets that create search parameters forward them to their child index widgets.

Copy
search.addWidgets([
  instantsearch.widgets.searchBox(),
  instantsearch.widgets.hits(),

  instantsearch.widgets.index({ indexName: 'instant_search' }).addWidgets([
    // The index inherits from the parent's `searchBox` search parameters
    instantsearch.widgets.hits(),
  ]),
]);

The only exception to this rule is when two widgets own the same part of your UI state, like two searchBox widgets or two refinementList widgets on the same attribute. In that case, the latter takes precedence and overrides the search parameters.

Copy
search.addWidgets([
  instantsearch.widgets.searchBox(),
  instantsearch.widgets.hits(),

  instantsearch.widgets.index({ indexName: 'instant_search' }).addWidgets([
    // The index does not inherit from the parent's `searchBox` search parameters
    instantsearch.widgets.searchBox(),
    instantsearch.widgets.hits(),
  ]),
]);

The same rule applies when you nest multiple index widgets.

Examples

Copy
instantsearch.widgets
  .index({ indexName: 'instant_search' })
  .addWidgets([
    // Add widgets
    // ...
  ]);

Options


            indexName

type: string

Required

The index to search into.

Copy
instantsearch.widgets.index({
  indexName: 'instant_search',
});


            indexId

type: string

default: value provided for indexName

Optional

An identifier for the index widget. Providing an indexId allows different index widgets to target the same Algolia index. It’s especially useful for the routing feature. It lets you find the refinements that match an index widget.

Copy
instantsearch.widgets.index({
  // ...
  indexId: 'instant_search_one',
});

Methods


            addWidgets

Adds widget(s) to the index.

Copy

1
2
3
4
5
6
7
8
9
10
11
12
13
const index = instantsearch.widgets.index({
  indexName: 'instant_search',
});

const searchBox = instantsearch.widgets.searchBox({
  // ...
});

const hits = instantsearch.widgets.hits({
  // ...
});

index.addWidgets([searchBox, hits]);


            removeWidgets

Removes widget(s) from the index widget. To be properly removed, the widget instances you pass must have a dispose() method.