Guides / Building Search UI / UI & UX patterns

If you want to search multiple indices, there are a couple of approaches you can take:

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.

Use Autocomplete

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

Check out the Autocomplete guide for more information. Even though the guide focuses on a query suggestions implementation, you can use it with any source or Algolia indices.

Did you find this page helpful?