Concepts / Building Search UI / Multi index search
May. 10, 2019

Multi Index Search

Multi-index

Sometimes a single search interface is not enough to fit your use case. Maybe you want to display a single search bar, but search in multiple indices at the same time. Maybe you just want to show a minimal search interface on your home page, and a more detailed view in a second screen.

For all those use-cases where a single interface would not work, we provide a feature: Multi-Index.

Principles

A multi-index project consists of several search interfaces that are meant to work independently. It consists of two or more sets of:

  • a Searcher
  • an InstantSearch
  • a group of Widgets

Variant

To associate the widgets to the Searcher, we provide a variant attribute that you can set on widgets:

1
2
3
4
<MyWidget
    android:id="@+id/myWidget"
    ...
    algolia:variant="products" />

By default each Searcher will use its index name as a variant, but you can choose your own.

Usage

One SearchBox, Multiple Indices

This is the typical multi-index use case: you want to show results from several sources in a single interface.

To do so, you need to instantiate two Searchers, link each one to its widgets via an InstantSearch, then connect them to the same SearchBox through a SearchBoxViewModel:

1
2
3
4
5
6
7
8
searcherMovies = Searcher.create(ALGOLIA_APP_ID, ALGOLIA_API_KEY, "movies");
searcherActors = Searcher.create(ALGOLIA_APP_ID, ALGOLIA_API_KEY, "actors");

// Create a SearchBoxViewModel with your SearchBox
searchBoxViewModel = new SearchBoxViewModel(this.findViewById(R.id.include_searchbox));
// Link it to your Activity's widgets
new InstantSearch(this, searcherMovies).registerSearchView(this, searchBoxViewModel);
new InstantSearch(this, searcherActors).registerSearchView(this, searchBoxViewModel);

Each InstantSearch helper will know which widgets it should handle thanks to its variant. You must set a variant on each widget to connect it to the right Searcher:

1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="utf-8"?>
<!-- ... -->
    <com.algolia.instantsearch.ui.views.Hits
        android:id="@+id/hitsMovies"
        ...
        algolia:itemLayout="@layout/item_movie"
        algolia:variant="movies" />

    <com.algolia.instantsearch.ui.views.Hits
        android:id="@+id/hitsActors"
        ...
        algolia:itemLayout="@layout/item_actor"
        algolia:variant="actors" />

You can check the Movies app, which demonstrates such a pattern both displayed as sections and as tabs.

Several independent interfaces

This fits the more generic use-cases where you want to have several independent search interfaces in your app:

  • Showcasing popular results in your app’s homepage, then offering a full-fledged search interface
  • Displaying two search interfaces alongside, each one searching a different dataset with different widgets

To do so, you will create two (or more) independent groups of widgets and helpers:

1
2
3
4
5
6
7
8
searcherMain = Searcher.create(ALGOLIA_APP_ID, ALGOLIA_API_KEY, ALGOLIA_INDEX_MAIN);
searcherOther = Searcher.create(ALGOLIA_APP_ID, ALGOLIA_API_KEY, ALGOLIA_INDEX_OTHER);

// In your first interface's Activity, link the first searcher to its widgets:
new InstantSearch(this, searcherMain);

// Likewise in your second interface's Activity:
new InstantSearch(this, searcherOther);

If both groups of widgets are embedded in the same layout, you need to specify a variant on each widget to specify to which Searcher it belongs:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version="1.0" encoding="utf-8"?>
<!-- ... -->
    <com.algolia.instantsearch.ui.views.SearchBox
        android:id="@+id/searchBoxMain"
        ...
        algolia:variant="main" />

    <com.algolia.instantsearch.ui.views.SearchBox
        android:id="@+id/searchBoxOther"
        ...
        algolia:variant="other" />

    <com.algolia.instantsearch.ui.views.Hits
        android:id="@+id/hitsMain"
        ...
        algolia:itemLayout="@layout/item_movie"
        algolia:variant="main" />

    <com.algolia.instantsearch.ui.views.Hits
        android:id="@+id/hitsOther"
        ...
        algolia:itemLayout="@layout/item_actor"
        algolia:variant="other" />

Did you find this page helpful?