Skip to main content
Prefer using the Autocomplete widget from InstantSearch instead of the standalone Autocomplete library. It integrates more closely with your search experience. For more information, see the API reference for InstantSearch.js or React InstantSearch.
A user types into an input, and the autocomplete suggests full terms or results to complete their thought. This is the foundation of an autocomplete experience. Autocomplete is an ubiquitous part of most search experiences. Search providers like Google, ecommerce sites like Amazon, and messaging apps like Slack all use autocomplete experiences on mobile and desktop. Autocomplete can display completed search terms or direct search results. This reduces typing effort and is especially helpful on mobile devices. It can also surface relevant products, searches, or content. You’ve likely already encountered Autocomplete-powered interfaces. The Algolia documentation itself, as well as sites like React Native and Tailwind CSS, use Autocomplete through the Algolia DocSearch project. This library is flexible enough to power much more than documentation search. It’s designed to help you build interactive and accessible autocomplete experiences, regardless of your use case.

​
What Autocomplete provides

Autocomplete is a JavaScript library that lets you quickly build autocomplete experiences. All you need to get started is:
  • A container to inject the experience into
  • Data to fill the autocomplete with
The data that fills the autocomplete is called sources. You can use whatever you want in your sources: a static set of searches terms, search results from an external source like an Algolia , recent searches, and more. You only need to configure two required parameters: container and getSources. Once you do, Autocomplete creates the input and handles user interactions. The library creates an input and provides the interactivity and accessibility attributes, but you’re in full control of the DOM elements to output. You aren’t limited to suggested search terms. You can display links to individual results or even display “actions” that a user can take from within an autocomplete. For example, you could let your users turn dark mode on, directly from an autocomplete, if they begin to type “dark mode”. You can also display different data types, such as suggested search terms, product results, and actions, in different ways. The format of each data type and layout is customizable.

​
What Autocomplete doesn’t provide

Unlike InstantSearch, Autocomplete doesn’t provide a library of ready-made UI widgets. You control how the autocomplete interface is rendered, while the library handles its core behavior and accessibility. You’re also in charge of providing the collection of items to display. You can easily plug Algolia results using getAlgoliaResults if you want, but you’re free to use Autocomplete with any data sources you want. To learn more, see Getting started for a basic example in action.
Last modified on September 16, 2026