Skip to main content
Autocomplete is also available as an experimental widget in InstantSearch, making it easier to integrate into your search experience. To learn more, see the API reference for InstantSearch.js or React InstantSearch.
The createRecentSearchesPlugin plugin lets you implement your own storage. To connect with the user’s local storage, check createLocalStorageRecentSearchesPlugin.

​
Installation

First, you need to install the plugin. 
npm install @algolia/autocomplete-plugin-recent-searches
Then import it in your project:
JavaScript
import { createRecentSearchesPlugin } from "@algolia/autocomplete-plugin-recent-searches";
If you don’t use a package manager, you can use the HTML script element:
HTML
<script
  src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-plugin-recent-searches@1.19.4/dist/umd/index.production.js"
  integrity="JAf5JY7F16U/j5RLELqF/rRSwfocLXIivSQhZeDdugs="
  crossorigin="anonymous"
></script>
<script>
  const { createRecentSearchesPlugin } =
    window["@algolia/autocomplete-plugin-recent-searches"];
</script>

​
Example

This example uses the plugin within autocomplete-js. You’re in charge of implementing the storage to fetch and save recent searches.
JavaScript
import { autocomplete } from "@algolia/autocomplete-js";
import { createRecentSearchesPlugin } from "@algolia/autocomplete-plugin-recent-searches";

const recentSearchesPlugin = createRecentSearchesPlugin({
  // Implement your own storage
  storage: {
    getAll() {},
    onAdd() {},
    onRemove() {},
  },
});

autocomplete({
  container: "#autocomplete",
  openOnFocus: true,
  plugins: [recentSearchesPlugin],
});
For example, you can connect it to a MongoDB database using mongoose.
JavaScript
import mongoose from "mongoose";
import { createRecentSearchesPlugin } from "@algolia/autocomplete-plugin-recent-searches";
import { search } from "@algolia/autocomplete-plugin-recent-searches/usecases/localStorage";

mongoose.connect("mongodb://localhost:27017/myapp", { useNewUrlParser: true });

const schema = new mongoose.Schema({
  objectID: String,
  query: String,
  category: {
    type: String,
    default: undefined,
  },
});
const RecentSearchesItem = mongoose.model("RecentSearchesItem", schema);

const recentSearchesPlugin = createRecentSearchesPlugin({
  storage: {
    async getAll(query) {
      const items = await RecentSearchesItem.find({});

      return search({ query, items, limit: 5 });
    },
    onAdd(item) {
      RecentSearchesItem.create(item);
    },
    onRemove(objectID) {
      RecentSearchesItem.deleteOne({ objectID });
    },
  },
});
You can combine this plugin with the Query Suggestions plugin to populate the empty screen with recent and popular queries.
JavaScript
import { liteClient as algoliasearch } from "algoliasearch/lite";
import { autocomplete } from "@algolia/autocomplete-js";
import { createRecentSearchesPlugin } from "@algolia/autocomplete-plugin-recent-searches";
import { createQuerySuggestionsPlugin } from "@algolia/autocomplete-plugin-query-suggestions";

const searchClient = algoliasearch(
  "latency",
  "6be0576ff61c053d5f9a3225e2a90f76",
);
const recentSearchesPlugin = createRecentSearchesPlugin({
  // Implement your own storage
  storage: {
    getAll() {},
    onAdd() {},
    onRemove() {},
  },
});
const querySuggestionsPlugin = createQuerySuggestionsPlugin({
  searchClient,
  indexName: "instant_search_demo_query_suggestions",
  getSearchParams() {
    return recentSearches.data.getAlgoliaSearchParams();
  },
});

autocomplete({
  container: "#autocomplete",
  openOnFocus: true,
  plugins: [recentSearchesPlugin, querySuggestionsPlugin],
});

​
Parameters

​
storage
RecentSearchesStorage
required
The storage to fetch from and save recent searches into.
TypeScript
type RecentSearchesItem = {
  id: string;
  query: string;
};
type RecentSearchesStorage<TItem extends RecentSearchesItem> = {
  onAdd(item: TItem): void;
  onRemove(id: string): void;
  getAll(query?: string): MaybePromise<Array<Highlighted<TItem>>>;
};
​
transformSource
function
Type definition
(params: {
  source: AutocompleteSource,
  state: AutocompleteState,
  onRemove: () => void,
  onTapAhead: () => void,
})
This function takes the original source as a parameter and returns a modified version of that source.Example: change Autocomplete stateUsually, when a link in the Autocomplete menu is selected, the menu closes. However, to keep the menu visible after a selection is made, use transformSource to set the isOpen state:
JavaScript
const recentSearchesPlugin = createRecentSearchesPlugin({
  storage,
  transformSource({ source, onRemove }) {
    return {
      ...source,
      onSelect({ setIsOpen }) {
        setIsOpen(true);
      },
    };
  },
});
Example: create linksTurns Query Suggestions into clickable Google search links:
const recentSearchesPlugin = createRecentSearchesPlugin({
  storage,
  transformSource({ source, onRemove }) {
    return {
      ...source,
      getItemUrl({ item }) {
        return `https://google.com?q=${item.query}`;
      },
      templates: {
        ...source.templates,
        item(params) {
          const { item, html } = params;

          return html`<a
            class="aa-ItemLink"
            href="https://google.com?q=${item.query}"
          >
            ${source.templates.item(params).props.children}
          </a>`;
        },
      },
    };
  },
});
​
translations
AutocompleteRecentSearchesPluginTranslations
TypeScript
type AutocompleteRecentSearchesPluginTranslations = {
  removeSearchTitle: string; // defaults to 'Remove this search'
  fillQueryTitle: (text: string) => string; // defaults to 'Fill query with "${text}"'
};
A dictionary of translations to support internationalization.

​
Returns

​
data

​
getAlgoliaSearchParams
SearchParameters => SearchParameters
Optimized Algolia search parameters. This is useful when using the plugin along with the Query Suggestions plugin.This function enhances the provided search parameters by:
  • Excluding Query Suggestions that are already displayed in recent searches.
  • Using a shared hitsPerPage value to get a group limit of Query Suggestions and recent searches.
​
addItem
(item: TItem) => void
A function that adds an item to the recent searches storage.
​
removeItem
(id: string) => void
A function that removes an item from the recent searches storage.
​
getAll
() => TItem[]
A function that returns the items from the recent searches storage.