Introduction

The API reference contains technical information on all Autocomplete packages.

This API references how to import and use the Autocomplete APIs without guidance. Make sure to read the Core concepts first. To learn more about Autocomplete patterns, head over to the Guides.

Autocomplete provides an ecosystem of companion libraries you can use for various purposes.

Core

The autocomplete-core package is the foundation of Autocomplete. It exposes primitives to build an autocomplete experience.

You likely don't need to use this package directly unless you're building a renderer.

Renderers

Renderers provide a UI to headless autocomplete experiences built with autocomplete-core. For example, autocomplete-js is an agnostic virtual DOM renderer. You can use it in JavaScript, Preact, React, or Vue projects.

Custom renderers are an advanced pattern that you should only use when hitting the limits of autocomplete-js. For instance, you might need your own renderer when working with a JavaScript library that doesn't use a virtual DOM or when the layout structure of autocomplete-js is too constraining for your use case.

Plugins

Plugins encapsulate custom functionalities. They abstract common behaviors that you might want to use in your experience by hooking into the Autocomplete lifecycle.

We provide a few official plugins:

• autocomplete-plugin-recent-searches displays a list of the latest searches the user made. It comes with a pre-implemented version that connects with the user's local storage.
• autocomplete-plugin-query-suggestions plugs Algolia Query Suggestions to your autocomplete.
• autocomplete-plugin-algolia-insights automatically sends click and conversion events to the Algolia Insights API whenever a user interacts with the autocomplete.

You can build your own plugin by implementing the AutocompletePlugin interface.

Presets

Presets provide utilities to use in Autocomplete experiences. They facilitate integration with other tools or libraries by providing common helpers and sane defaults.

We currently provide a single preset:

• autocomplete-preset-algolia provides fetching and highlighting utilities for usage with Algolia.

Themes

Themes are CSS packages to style Autocomplete experiences. They work out of the box with the exposed class names from autocomplete-js.

We currently provide a single theme:

• autocomplete-theme-classic is the official Autocomplete theme.