Guides / Building Search UI / UI & UX patterns

It might happen that you want to search across multiple indices at the same time. Vue InstantSearch has a built-in solution for searching into multiple indices with an autocomplete component. Another common use case is to display hits from multiple indices at the same time. We don’t have a proper API for this use case but we can synchronize two Vue InstantSearch instance to have the same behavior.

In this guide we will learn how to share a single ais-search-box to display multiple hits from different indices. We will also take a look at how to create an autocomplete that targets multiple indices. The source code of both examples can be found on GitHub.

Hits from multiple indices

For this first use case we share a single ais-search-box to search into multiple indices. For this behavior we use 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. The first index widget is implied by the creation of the ais-instant-search widget.

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 slot="item" slot-scope="{ 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 slot="item" slot-scope="{ 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>

Note that since these are two dedicated indices, we 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.

Autocomplete

If you need to display multiple result types in an autocomplete, or search in several Algolia indices at a time, you can set up multi-index search with Autocomplete.

You can check the following guide to learn how to do so. Note that even though the guide focuses on a Query Suggestions implementation, you can use it with any kind of sources or Algolia indices.

Did you find this page helpful?