Guides / Solutions / Ecommerce / Search / Autocomplete

As users come back to your site, they often want to revisit items they saw before. For example, they want to look at a product they liked from your store, or they want to re-watch a video they watched earlier. By combining recent searches and trending searches you can create a great empty search state to guide users even before they start typing.

Recent searches and trending searches in the empty search state UI

Before you begin

Most autocomplete implementations combine recent searches with search suggestions. To add search suggestions, see Autocomplete with Search Suggestions.

Adding recent searches to Autocomplete

To add recent searches to Autocomplete, use the official autocomplete-plugin-recent-searches plugin.

You can decide, where to store recent searches. If you want to store and read from the users browser’s local storage, see Adding recent searches. You can also handle recent searches in your back end. In that case, see Using your own storage.

If you want to show recent searches together with trending searches in the empty-search state, you can add the recent searches to createQuerySuggestionsPlugin:

1
2
3
4
5
6
7
8
9
10
11
12
13
...
const querySuggestionsPlugin = createQuerySuggestionsPlugin({
  searchClient,
  indexName: 'instant_search_demo_query_suggestions',
  // Add up to `5` recent searches to the popular searches from the Query Suggestions index
  getSearchParams() {
    return recentSearchesPlugin.data.getAlgoliaSearchParams({
      hitsPerPage: 5,
    });
  },
  ...
});
...

Make sure to add both recentSearchesPlugin and querySuggestionPlugin to Autocomplete:

1
2
3
4
5
6
...
autocomplete({
  ...
  plugins: [recentSearchesPlugin, querySuggestionsPlugin],
});
...

If you want to change some aspects of how the recent searches are shown, see Customizing recent searches.

Going further

Often, recent searches are combined with other variations of autocomplete. For example, you can combine search suggestions with related categories or federated search with recent searches.

Algolia’s DocSearch is a great example of an autocomplete experience with recent searches and extra features, such as keyboard navigation and bookmarking searches as favorites.

Algolia DocSearch

Did you find this page helpful?