Algolia Autocomplete

Install the Algolia preset using npm or yarn. This preset provides fetching and highlighting utilities specifically designed for use with Algolia search engines.

yarn add @algolia/autocomplete-preset-algolia
# or
npm install @algolia/autocomplete-preset-algolia

You can install the Tags plugin using either yarn or npm to enable tag management and display within your Algolia Autocomplete implementation.

yarn add @algolia/autocomplete-plugin-tags
# or
npm install @algolia/autocomplete-plugin-tags

To use the Recent Searches plugin, which displays a list of the user's latest searches, install it via npm or yarn:

yarn add @algolia/autocomplete-plugin-recent-searches
# or
npm install @algolia/autocomplete-plugin-recent-searches

If you are not using a package manager, you can include Autocomplete using an HTML script element from a CDN.

<script src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-js"></script>
<script>
  const { autocomplete } = window['@algolia/autocomplete-js'];
</script>

To use the Algolia Insights plugin, which automatically sends click and conversion events to the Algolia Insights API during autocomplete interactions, install it via npm or yarn.

yarn add @algolia/autocomplete-plugin-algolia-insights
# or
npm install @algolia/autocomplete-plugin-algolia-insights

The recommended way to get started is with the @algolia/autocomplete-js package, which includes everything needed to render a JavaScript autocomplete experience. You can install it via npm or yarn.

Alternatively, if you want to build a custom renderer from scratch, you can install @algolia/autocomplete-core instead.

yarn add @algolia/autocomplete-js
# or
npm install @algolia/autocomplete-js

To use Autocomplete, you must provide a container (a CSS selector or an HTMLElement) where the experience will be injected.

Important: The container should be a layout element like a div, not an input. Autocomplete will automatically generate a fully accessible search box for you inside the container.

You must also provide getSources to define the data that populates the results.

To add Query Suggestions to your autocomplete implementation, install the plugin using npm or yarn:

yarn add @algolia/autocomplete-plugin-query-suggestions
# or
npm install @algolia/autocomplete-plugin-query-suggestions

Install the classic theme for Algolia Autocomplete using npm or yarn. This theme provides a neutral and clean starter design that can be customized using CSS variables.

yarn add @algolia/autocomplete-theme-classic
# or
npm install @algolia/autocomplete-theme-classic

Install the @algolia/autocomplete-core package using yarn or npm. This package provides the foundational primitives for building an autocomplete experience and is primarily intended for developers building custom renderers.

yarn add @algolia/autocomplete-core
# or
npm install @algolia/autocomplete-core

To add redirect functionality to your autocomplete, install the @algolia/autocomplete-plugin-redirect-url package using npm or yarn.

yarn add @algolia/autocomplete-plugin-redirect-url
# or
npm install @algolia/autocomplete-plugin-redirect-url