createLocalStorageRecentSearchesPlugin

This plugin connects with the user’s local storage to fetch and save recent searches.

Autocomplete is also available as an experimental widget in InstantSearch, making it easier to integrate into your search experience. For more information, see the API reference for InstantSearch.js or React InstantSearch.

The createLocalStorageRecentSearchesPlugin plugin connects with the user’s local storage to fetch and save recent searches. To use your own storage, check createRecentSearchesPlugin.

See demo

Installation

First, you need to install the plugin.

npm

npm install @algolia/autocomplete-plugin-recent-searches

yarn add @algolia/autocomplete-plugin-recent-searches

Then import it in your project:

JavaScript

import { createLocalStorageRecentSearchesPlugin } 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.9/dist/umd/index.production.js"
  integrity="sha256-jKoLPMdNVipXJ5otUs3DwuZeaX1kytBq2HleXEo4G7E="
  crossorigin="anonymous"
></script>
<script>
  const { createRecentSearchesPlugin } =
    window["@algolia/autocomplete-plugin-recent-searches"];
</script>

Example

This example uses the plugin within autocomplete-js.

JavaScript

import { autocomplete } from "@algolia/autocomplete-js";
import { createLocalStorageRecentSearchesPlugin } from "@algolia/autocomplete-plugin-recent-searches";

const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({
  key: "navbar",
});

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

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 { createLocalStorageRecentSearchesPlugin } from "@algolia/autocomplete-plugin-recent-searches";
import { createQuerySuggestionsPlugin } from "@algolia/autocomplete-plugin-query-suggestions";

const searchClient = algoliasearch(
  "latency",
  "6be0576ff61c053d5f9a3225e2a90f76",
);
const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({
  key: "navbar",
});
const querySuggestionsPlugin = createQuerySuggestionsPlugin({
  searchClient,
  indexName: "instant_search_demo_query_suggestions",
  getSearchParams() {
    return recentSearches.data.getAlgoliaSearchParams();
  },
});

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

Parameters

key · string · required

A local storage key to identify where to save and retrieve the recent searches.

For example:

• "navbar"
• "search"
• "main"

The plugin namespaces all keys to avoid collisions.

limit · number

The number of recent searches to display.

search · (params: { query: string; items: TItem[]; limit: number; }) => TItem[]

A search function to retrieve recent searches from. This function is called in storage.getAll to retrieve recent searches and is useful to filter and highlight recent searches when typing a query.

JavaScript

function highlight({ item, query }) {
  return {
    ...item,
    _highlightResult: {
      query: {
        value: query
          ? item.query.replace(
              new RegExp(query, "g"),
              `<span class='underline'>aa-highlight</span>${query}<span class='underline'>/aa-highlight</span>`,
            )
          : item.query,
      },
    },
  };
}

function search({ query, items, limit }) {
  if (!query) {
    return items.slice(0, limit).map((item) => highlight({ item, query }));
  }

  return items
    .filter((item) => item.query.toLowerCase().includes(query.toLowerCase()))
    .slice(0, limit)
    .map((item) => highlight({ item, query }));
}

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.

For example:

Change Autocomplete state

Usually, 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 = createLocalStorageRecentSearchesPlugin({
  key: "navbar",
  transformSource({ source, onRemove }) {
    return {
      ...source,
      onSelect({ setIsOpen }) {
        setIsOpen(true);
      },
    };
  },
});

Create links

Turns Query Suggestions into clickable Google search links:

JavaScript

const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({
  key: "navbar",
  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>`;
        },
      },
    };
  },
});

const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({
  key: "navbar",
  transformSource({ source, onRemove }) {
    return {
      ...source,
      getItemUrl({ item }) {
        return `https://google.com?q=${item.query}`;
      },
      templates: {
        ...source.templates,
        item(params) {
          const { item } = params;

          return (
            <a
              classbody="aa-ItemLink"
              href={`https://google.com?q=${item.query}`}
            >
              {source.templates.item(params).props.children}
            </a>
          );
        },
      },
    };
  },
});

translations · AutocompleteRecentSearchesPluginTranslations

Type definition

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 local storage.

removeItem · (id: string) => void

A function that removes an item from the recent searches local storage.

getAll · () => TItem[]

A function that returns the items from the recent searches local storage.