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.
#
CoreThe 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.
#
RenderersRenderers 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.
#
PluginsPlugins 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.
#
PresetsPresets 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.
#
ThemesThemes 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.