Build a Query Suggestions UI

To help users with their search, Algolia provides Query Suggestions. This feature creates an of your user’s best queries. You can then use this index to propose suggestions to your users as they’re typing into the ais-search-box. Once you’ve configured the generation of the Query Suggestions index, you need to query this index as well. Use multi-index search to do that. This guide shows how to use a search box to display a list of suggestions and their associated categories. Once users select a suggestion, Algolia will apply the query and the category. If you’re building an autocomplete with Query Suggestions, you should use the Autocomplete library which lets you build a full-featured, accessible autocomplete experience. This is the recommended way of building an autocomplete search with Algolia. For more information, see:

Working example

Open CodeSandbox

Run and edit the Query Suggestions UI example in CodeSandbox.

Explore source code

Browse the source for the Query Suggestions UI example on GitHub.

This code has been specifically created for Vue 2. Some modifications may be required for it to work correctly in Vue 3.

Refine your results with suggestions

To set up multi-index search experience so users can select a suggestion and use it to search the main index:

Set up custom autocomplete component

Set up a custom autocomplete component with the Vue Autosuggest library.

Wrap the conponent in the connector

Wrap the autocomplete component with the ais-autocomplete connector. For more infomation, see Autocomplete.

Vue

<template>
  <ais-instant-search
    :search-client="searchClient"
    index-name="instant_search_demo_query_suggestions"
  >
    <ais-configure :hitsPerPage="5" />
    <ais-autocomplete>
      <template v-slot="{ currentRefinement, indices, refine }">
        <vue-autosuggest
          :suggestions="indicesToSuggestions(indices)"
          @selected="onSelect"
          :input-props="{
            style: 'width: 100%',
            onInputChange: refine,
            placeholder: 'Search here...',
          }"
        >
          <template v-slot="{ suggestion }">
            <ais-highlight attribute="query" :hit="suggestion.item" />
          </template>
        </vue-autosuggest>
      </template>
    </ais-autocomplete>
  </ais-instant-search>
</template>

<script>
import { VueAutosuggest } from 'vue-autosuggest';

export default {
  components: { VueAutosuggest },
  methods: {
    onSelect(selected) {
      if (selected) {
        console.log('selected');
      }
    },
    indicesToSuggestions(indices) {
      return indices.map(({ hits }) => ({
        data: hits.map(hit => {
          return {
            ...hit,
            // this is for Vue AutoSuggest
            name: hit.query,
          };
        }),
      }));
    },
  },
};
</script>

Create the multi-index search experience

The ais-autocomplete widget reads from two indices: instant_search_demo_query_suggestions and instant_search. The first index widget is implied by the creation of the ais-instant-search widget.

Vue

<template>
  <div>
    <ais-instant-search
      :search-client="searchClient"
      index-name="instant_search_demo_query_suggestions"
    >
      <ais-configure :hitsPerPage="5" />
      <ais-index index-name="instant_search" />
      <ais-autocomplete>
        <template v-slot="{ currentRefinement, indices, refine }">
          <vue-autosuggest
            :suggestions="indicesToSuggestions(indices)"
            @selected="onSelect"
            :input-props="{
              style: 'width: 100%',
              onInputChange: refine,
              placeholder: 'Search here...',
            }"
          >
          <template v-slot="{ suggestion }">
            <ais-highlight
              :hit="suggestion.item"
              attribute="query"
              v-if="suggestion.item.query"
            />
            <ais-highlight
              :hit="suggestion.item"
              attribute="name"
              v-else
            />
            <strong v-if="suggestion.item.price">
              $ {{ suggestion.item.price }}
            </strong>
            <img
              :src="suggestion.item.image"
              style="height: 50px;"
              v-if="suggestion.item.image"
            />
          </template>
          </vue-autosuggest>
        </template>
      </ais-autocomplete>
    </ais-instant-search>
  </div>
</template>

<script>
import { VueAutosuggest } from 'vue-autosuggest';

export default {
  components: { VueAutosuggest },
  methods: {
    onSelect(selected) {
      if (selected) {
        const { query } = selected.item;
        this.query = query;
      }
    },
    indicesToSuggestions(indices) {
      return indices.map(({ hits }) => ({
        data: hits.map(hit => {
          return {
            ...hit,
            // this is for Vue Autosuggest
            name: hit.query,
          };
        }),
      }));
    },
  },
};
</script>

A typical use of autocomplete is to display both relevant categories and suggestions. Then when a user selects a suggestion, both the suggestion and the associated category are used to refine the search. For this example, the relevant categories are stored on the suggestions . You must update your render function to display the categories with the suggestions. For simplicity and brevity of the code, assume that all suggestions have categories, but this isn’t the case in the actual dataset. Take a look at the complete example to see the actual implementation.

Vue

<template>
  <!-- ... -->
    <template v-slot="{ suggestion }">
      <span>
        <ais-highlight attribute="query" :hit="suggestion.item" />
        <span>
          <em>
            in
            <span v-if="suggestion.item.category">
              {{ suggestion.item.category.value }}
            </span>
            <span v-else> All categories </span>
          </em>
        </span>
      </span>
    </template>
  <!-- ... -->
</template>

<script>
export default {
  methods:
    indicesToSuggestions(indices) {
      return indices.map(({ hits }) => ({
        data: hits.map(hit => {
          // categories is an array, but you only want the first element
          // hit.instant_search is undefined if there are no matched categories
          const [category] =
            (hit.instant_search &&
              hit.instant_search.facets.exact_matches.categories) ||
            [];

          return {
            ...hit,
            category,
            name: hit.query,
          };
        }),
      }));
    },
  },
};
</script>

Now that you can display categories, you can use them to refine the main search. Use the ais-configure widget with disjunctiveFacets and disjunctiveFacetsRefinement. These two parameters are the same as internally used in a refinement list.

Vue

<template>
  <!-- ... -->
  <ais-instant-search
    :search-client="searchClient"
    index-name="instant_search"
  >
    <!-- optionally to display the selected category -->
    <ais-current-refinements />
    <ais-configure
      :query="query"
      :disjunctiveFacets="['categories']"
      :disjunctiveFacetsRefinements="disjunctiveFacetsRefinements"
    />
    <!-- ... -->
  </ais-instant-search>
</template>

<script>
export default {
  data() {
    return {
      query: '',
      disjunctiveFacetsRefinements: undefined,
    };
  },
  methods: {
    onSelect(selected) {
      if (selected) {
        const { query, category } = selected.item;
        this.query = query;
        this.disjunctiveFacetsRefinements = category && {
          categories: [category.value],
        };
      }
    },
  },
};
</script>

That’s it. When a suggestion is selected, both the query and the category are applied to the main search.

Search and Discovery platform

Optimization and Personalization

AI-powered experiences

Production and scale

Build a Query Suggestions UI

Working example

Open CodeSandbox

Explore source code

Refine your results with suggestions

​Working example

Open CodeSandbox

Explore source code

​Refine your results with suggestions

​Use the related categories in the autocomplete

Working example

Refine your results with suggestions

Use the related categories in the autocomplete