Guides / Solutions / Ecommerce / Autocomplete

Autocomplete with Search Suggestions

Build an autocomplete experience like Google’s search bar. When users start typing, they can select search queries from a list of suggestions. Autocomplete menus save typing and lead to relevant results faster.

Seach Suggestions UI demo

Solution overview

To build an autocomplete solution, you need these steps:

  1. Add data sources for Query Suggestions. In the back end, Algolia uses Search Analytics to get the most popular search queries of the last 30 days and creates a Query Suggestions index.
  2. Configure relevance for the Query Suggestions index. You can tune the relevance, for example, to promote or hide particular suggestions.
  3. Build an Autocomplete front end. The Autocomplete UI library renders the list of query suggestions on every keystroke and adds features like highlighting, keyboard navigation, and tap-ahead.

Adding data sources for Query Suggestions

A Query Suggestions index stores the search suggestions. To create your Query Suggestions index, you can use these data sources:

Query Suggestions Data Sources Overview

Data source When to use
Historical search analytics If you're a new Algolia user, you won't have any Algolia
Analytics data yet. You can add historical searches from
other platforms like Google Analytics, or Adobe Analytics.

See Using external analytics for more information.
Keywords from your Algolia index If you don't have any historical search data, you can
generate suggestions based on keywords from data
attributes in your Algolia index.

See Using facet data for more information.
Algolia Analytics By default, Algolia Analytics updates the Query
Suggestions index based on the top searches in the
last 30 days.

See Using Algolia Analytics for more information.

If you’re new to Algolia, use options A and B to get started. When your users start searching, Algolia Analytics adds data to your Query Suggestions index automatically.

An example record from a Query Suggestions index could look like this:

1
2
3
4
5
6
7
8
9
10
11
{
  // completed query suggestion
  "query": "chamber of secrets",
  // unique record identifier
  "objectID": "chamber secrets",
  // number of users that searched this query in the last 30 days
  "popularity": 186,
  // number of words in the query suggestion
  "nb_words": 3,
  ...
}

Autocomplete isn’t just limited to Algolia’s APIs. You can integrate content from third-party APIs as well with asynchronous sources.

Configuring relevance in the dashboard

By default, the Query Suggestions index uses these settings:

  • query is a searchable attribute to apply textual relevance to queries, enabling typo tolerance, synonyms, and other language settings.
  • Suggestions are ranked by popularity.
  • query is an attribute to highlight for highlighting and snippeting the search suggestions.

You can further tune the relevance, for example, using rules or synonyms.

Building the front end with Autocomplete

Autocomplete is Algolia’s UI library to show query suggestions, search results, and more. You can show search suggestions from Algolia with the official autocomplete-plugin-query-suggestions plugin.

All you need to get started is an HTML file with an empty container for Autocomplete to inject the autocomplete menu:

1
<div id="autocomplete"></div>

Follow the steps in Adding Suggested Searches to build the Autocomplete front end or check the code.

Now, you have a working autocomplete menu with search suggestions. If you want to customize your autocomplete menu, check these guides below.

Going further

After implementing the essential autocomplete experience, explore other variations and customizations.

Did you find this page helpful?