Advanced Multi index search

Multi index search

NOTE: this guide has been updated for v2

In this guide, you’ll learn how to get results out of searching from multiple indices simultaneously.

Take a look at a live multi-index search example to quickly grasp what we are talking about.

When to use multi-index search

You will need multi-index search when, in the same UI, you want to display results coming from different indices.

Here are two reasons to store your data in multiple indices:

• To have different ranking rules or settings depending on the type of data inside the index
• To make it easier to display only the results of a given type in a given area of your page

If you don’t need specific settings for part of your index, and you expect to see all results inter-mixed on the same area of your page, then chances are you won’t need to implement a multi-index search experience.

However, if you end up finding yourself trying to manually merge records coming from different indices, you have probably missed an opportunity to use multi-index search.

How it works

Every ais-instant-search component is in charge of fetching the results from a single Algolia index.

To implement a search experience that fetches results from two indices, you need to have two ais-instant-search components.

Tip: you can fetch results from as many indices as you want. 💥

Independent Multi-Index searches

Let’s take a look at what a minimal example of multi-index search looks like:

<!-- App.vue -->
<template>
  <ais-instant-search :search-client="searchClient" index-name="first">
    <ais-search-box />
    <ais-hits />
  </ais-instant-search>
  <ais-instant-search :search-client="searchClient" index-name="second">
    <ais-search-box />
    <ais-hits />
  </ais-instant-search>
</template>

<script>
import algoliasearch from 'algoliasearch';

export default {
  data() {
    return {
      searchClient: algoliasearch('xxx', 'xxx', { _useRequestCache: true }),
    };
  },
};
</script>

In this example we display results from two indices, but we are still using two search boxes.

Note: here, and in the other examples we put _useRequestCache to true. This is a feature that caches the requests rather than the responses and avoids extra queries being done here

Grouped Multi-Index searches

Here’s how to bind a single input displaying results from multiple indices:

<!-- App.vue -->
<template>
  <ais-instant-search :search-client="searchClient" index-name="first">
    <ais-search-box v-model="query" />
    <ais-hits />
  </ais-instant-search>
  <ais-instant-search :search-client="searchClient"index-name="second">
    <ais-search-box v-model="query" hidden/>
    <ais-hits />
  </ais-instant-search>
</template>

<script>
import algoliasearch from 'algoliasearch';

export default {
  data() {
    return {
      query: '',
      searchClient: algoliasearch('xxx', 'xxx', { _useRequestCache: true }),
    };
  },
};
</script>

We bind the query value using the v-model directive so that as the value changes, it gets propagated to the query for both search boxes. Note that we made the second search box invisible by hiding it, but it’s still rendered and thus still has an impact on the page

It’s also possible to bind this model on configure, this has the advantage that other things than the query also can be synchronized if necessary, like for example a menu. Here’s an example of using the ais-configure widget to synchronize the query.

<!-- App.vue -->
<template>
  <input v-model="query">
  <ais-instant-search :search-client="searchClient" index-name="first">
    <ais-configure :query="query" />
    <ais-results />
  </ais-instant-search>
  <ais-instant-search :search-client="searchClient" index-name="second">
    <ais-configure :query="query" />
    <ais-results />
  </ais-instant-search>
</template>

<script>
import algoliasearch from 'algoliasearch';

export default {
  data: function() {
    return {
      query: '',
      searchClient: algoliasearch('xxx', 'xxx', { _useRequestCache: true }),
    };
  },
};
</script>