Skip to main content
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.
⌘I