Guides / Solutions / Ecommerce / Autocomplete

Autocomplete with Search Suggestions and Related Categories

Search queries can cover a broad scope. For example, search results for the term “baby” can show up in many different categories, like “food” or “apparel.” Showing the most popular categories helps users get to relevant results faster by selecting a suggested search query and the appropriate category at the same time.

An example for an autocomplete menu with categories is Amazon’s interface. The top suggestions include categories, which you can use as filters.

Amazon-style autocomplete with categories

Before you begin

This tutorial builds on Autocomplete with Search Suggestions.

Adding categories to the search index

First, to use categories for suggested search queries, you need to select attributes for faceting in your Algolia index.

Second, go to the Query Suggestions page in your dashboard and add categories to the Query Suggestions index.

The Query Suggestions index updates each record automatically with categories in the facets attribute. To learn more about how the Query Suggestions index stores category attributes, see Suggestions with categories index schema.

An example record with categories looks like this:

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
{
  "query": "phone charger", // suggestion text
  ...
  "products": { // source index name
    ...
    "facets": {
      "exact_matches": {
        // how often does the `brand` value show up in search results
        "brand": [
          { "value": "Anker", "count": 12 },
          { "value": "Yootech", "count": 11 },
          { "value": "TOZO", "count": 9 },
          { "value": "Aukey", "count": 4 },
          { "value": "Apple", "count": 2 }
        ]
      },
      "analytics": {
        // how often is the `brand` filter applied?
        "brand": [
          { "attribute": "brand", "value": "Anker", "count": 347, "operator": ":" },
          { "attribute": "brand", "value": "Apple", "count": 203,"operator": ":" } 
        ]
    }
  }
}

In this example, the attribute brand is a category. You can find the “top” categories in two ways:

  • facets.exact_matches. Algolia looks for the query “phone charger” in the search index and counts which value for the brand category appears most often. In this example, the brand name “Anker” show up most often (12 times).

  • facets.analytics. Algolia Analytics counts, how often users apply the brand filter. In this example, users search for “phone charger” with the filter brand:Anker 347 times in the last 30 days.

Algolia recommends using the top categories from the facets.exact_matches attribute. When users don’t use filters with their search term, facet.analytics is empty. Some searches may lack enough results for the most used filter categories, which can lead to a bad user experience.

Showing categories in Autocomplete

To display categories in Autocomplete, add them to createQuerySuggestionsPlugin. See Adding categories for more information.

By default, Autocomplete shows categories on separate lines.

Suggested search terms with related categories on separate lines

To display the categories inline, next to the suggested search terms, use transformSource:

Suggested search terms with related categories shown inline

Applying category filters to the search results

Categories act as filters for search results. If the user selects a suggested search term with a related category, they find only search results matching that category. This helps the user narrow down the scope of a search query and leads to relevant results faster.

Depending on where you want to apply the filters, you can either refine the search results on the same page or on a linked search results page.

Did you find this page helpful?