Multi-Index Search with Vue InstantSearch

Multi-index search, or federated search, lets you search multiple data sources at once with the same query and gather results in a single search experience. This is a common pattern when building autocomplete search experiences, but also to offer centralized access to multiple sources of content developed and curated independently.

Multi-index search can also help you achieve complex UIs that display the content of the same index in several ways, for example to surface top-rated items before the list of results.

• Synchronize two InstantSearch indices and share a single search box to display multiple hits from different indices.
• Use Autocomplete to target multiple indices

The source code for both examples is on GitHub.

Synchronize two InstantSearch indices

This example uses a single ais-search-box to search multiple indices. For this behavior, there are two ais-index widgets. Each of them target a specific index: the first one is instant_search_price_desc and the second is instant_search.

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
32
33
34
35
36
37
38
39
40
41
42
43
44
<template>
  <div>
    <ais-instant-search
      :search-client="searchClient"
      index-name="instant_search_price_desc"
    >
      <ais-search-box />
      <ais-configure
        :restrictSearchableAttributes="['name']"
        :hitsPerPage="8"
      />
      <ais-hits>
        <template v-slot:item="{ item }">
          <h3><ais-highlight :hit="item" attribute="name" /></h3>
          <img :src="item.image" />
        </template>
      </ais-hits>
      <hr />
      <ais-index index-name="instant_search">
        <ais-hits>
          <template v-slot:item="{ item }">
            <h3><ais-highlight :hit="item" attribute="name" /></h3>
            <img :src="item.image" />
          </template>
        </ais-hits>
      </ais-index>
    </ais-instant-search>
  </div>
</template>

<script>
import algoliasearch from 'algoliasearch/lite';

export default {
  data() {
    return {
      searchClient: algoliasearch(
        'latency',
        '6be0576ff61c053d5f9a3225e2a90f76'
      ),
    };
  },
};
</script>

Since these are two dedicated indices, you can apply different parameters and widgets to the search. You can do it by passing different parameters to ais-configure, or mounting different widgets in each of the ais-index components.

You can find the complete example on GitHub.

Build a multi-source autocomplete experience

One of the most common use cases of multi-index search is when you’re building an autocomplete experience. For example, you may want to display Query Suggestions together with recent searches, create a multi-column layout mixing facets and item previews, or even dynamically change sources based on the query.

You can use the Autocomplete library in your InstantSearch app to build a dynamic multi-source autocomplete experience. Autocomplete isn’t limited to Algolia indices, so you can even use static sources or fetch data from other APIs.