Guides / Building Search UI / UI & UX patterns

Multi-index search

On this page

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 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 example uses a single search view to search in two indices. This is achieved through the aggregation of two HitsSearchers by the MultiSearcher. Each of them targets a specific index: the first one is mobile_demo_actors and the second is mobile_demo_movies. The results are presented in the dedicated sections of a LazyColumn.

The source code of this example is on GitHub.

Search data models

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

@Serializable
data class Movie(
    val title: String,
    override val objectID: ObjectID,
    override val _highlightResult: JsonObject?
) : Indexable, Highlightable {

    val highlightedTitle
        get() = getHighlight(Attribute("title"))
}

@Serializable
data class Actor(
    val name: String,
    override val objectID: ObjectID,
    override val _highlightResult: JsonObject?
) : Indexable, Highlightable {

    val highlightedName
        get() = getHighlight(Attribute("name"))
}

Search view model

Copy 
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

class MainViewModel : ViewModel() {

    private val multiSearcher = MultiSearcher(
        applicationID = ApplicationID("latency"),
        apiKey = APIKey("1f6fd3a6fb973cb08419fe7d288fa4db")
    )
    private val actorsSearcher = multiSearcher.addHitsSearcher(IndexName("mobile_demo_actors"))
    private val moviesSearcher = multiSearcher.addHitsSearcher(IndexName("mobile_demo_movies"))
    private val searchBoxConnector = SearchBoxConnector(multiSearcher)
    private val connections = ConnectionHandler(searchBoxConnector)

    val searchBoxState = SearchBoxState()
    val actorsState = HitsState<Actor>()
    val moviesState = HitsState<Movie>()

    init {
        connections += searchBoxConnector.connectView(searchBoxState)
        connections += actorsSearcher.connectHitsView(actorsState) { it.hits.deserialize(Actor.serializer()) }
        connections += moviesSearcher.connectHitsView(moviesState) { it.hits.deserialize(Movie.serializer()) }
        multiSearcher.searchAsync()
    }

    override fun onCleared() {
        super.onCleared()
        multiSearcher.cancel()
        connections.clear()
    }
}

Search UI

Copy 
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

@Composable
fun SearchScreen(
    modifier: Modifier = Modifier,
    searchBoxState: SearchBoxState,
    actorsState: HitsState<Actor>,
    moviesState: HitsState<Movie>,
) {
    Scaffold(modifier = modifier, topBar = {
        SearchBox(
            modifier = Modifier
                .fillMaxWidth()
                .padding(12.dp),
            searchBoxState = searchBoxState,
        )
    }) { paddings ->
        LazyColumn(
            Modifier
                .padding(paddings)
                .fillMaxSize()
        ) {
            stickyHeader { SectionTitle(title = "Actors") }
            items(actorsState.hits) { actor -> ActorItem(actor = actor) }

            stickyHeader { SectionTitle(title = "Movies") }
            items(moviesState.hits) { movie -> MovieItem(movie = movie) }
        }
    }
}

Search view activity

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

class MainActivity : ComponentActivity() {

    private val viewModel: MainViewModel by viewModels()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            AppTheme {
                SearchScreen(
                    searchBoxState = viewModel.searchBoxState,
                    actorsState = viewModel.actorsState,
                    moviesState = viewModel.moviesState,
                )
            }
        }
    }
}

Combine search for hits and facets values

This example uses a single search view to search in the index and facet values for attributes of the same index. This is achieved through the aggregation of the HitsSearcher and the FacetSearcher by the MultiSearcher. The results are presented in the dedicated sections of a LazyColumn.

The source code of this example is on GitHub.

Search data model

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@Serializable
data class Product(
    val name: String,
    val description: String,
    val image: String,
    override val objectID: ObjectID,
    override val _highlightResult: JsonObject?
) : Indexable, Highlightable {

    val highlightedName
        get() = getHighlight(Attribute("name"))

    val highlightedDescription
        get() = getHighlight(Attribute("description"))
}

Search view model

Copy 
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

class MainViewModel : ViewModel() {

    private val multiSearcher = MultiSearcher(
        applicationID = ApplicationID("latency"),
        apiKey = APIKey("6be0576ff61c053d5f9a3225e2a90f76")
    )
    private val indexName = IndexName("instant_search")
    private val attribute = Attribute("categories")
    private val productsSearcher = multiSearcher.addHitsSearcher(indexName)
    private val categoriesSearcher = multiSearcher.addFacetsSearcher(indexName, attribute)
    private val searchBoxConnector = SearchBoxConnector(multiSearcher)
    private val connections = ConnectionHandler(searchBoxConnector)

    val searchBoxState = SearchBoxState()
    val categoriesState = HitsState<Facet>()
    val productsState = HitsState<Product>()

    init {
        connections += searchBoxConnector.connectView(searchBoxState)
        connections += categoriesSearcher.connectHitsView(categoriesState) { it.facets }
        connections += productsSearcher.connectHitsView(productsState) { it.hits.deserialize(Product.serializer()) }
        multiSearcher.searchAsync()
    }

    override fun onCleared() {
        super.onCleared()
        multiSearcher.cancel()
        connections.clear()
    }
}

Search UI components

Copy 
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

@Composable
fun SearchScreen(
    modifier: Modifier = Modifier,
    searchBoxState: SearchBoxState,
    categoriesState: HitsState<Facet>,
    productsState: HitsState<Product>,
) {
    Scaffold(modifier = modifier, topBar = {
        SearchBox(
            modifier = Modifier
                .fillMaxWidth()
                .padding(12.dp),
            searchBoxState = searchBoxState,
        )
    }) { paddings ->
        LazyColumn(
            Modifier
                .padding(paddings)
                .fillMaxSize()
        ) {
            stickyHeader { SectionTitle(title = "Categories") }
            items(categoriesState.hits) { category -> CategoryItem(category = category) }

            stickyHeader { SectionTitle(title = "Products") }
            items(productsState.hits) { product -> ProductItem(product = product) }
        }
    }
}

Search view activity

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

class MainActivity : ComponentActivity() {

    private val viewModel: MainViewModel by viewModels()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            AppTheme {
                SearchScreen(
                    searchBoxState = viewModel.searchBoxState,
                    productsState = viewModel.productsState,
                    categoriesState = viewModel.categoriesState,
                )
            }
        }
    }
}

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. 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 to a category page. The following is a sample dataset for a product index and a category index.

Example product index

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

[
  {
    "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

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

[
  {
    "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/"
  }
]
Previous
Autocomplete
Next
Query Suggestions
Did you find this page helpful?
InstantSearch Android v3