Skip to main content
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—especially helpful on mobile devices—and helps users find what they need faster. It can also surface products, searches, or pages they may not have thought of but are interested in. 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.

Explore related content in the Algolia Academy

Autocomplete

​
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 populates the autocomplete results are 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 index, recent searches, and more. By configuring just those two required parameters (container and getSources) you can have an interactive autocomplete experience. 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 don’t have to display just suggested search terms, you can display links for actual results themselves (rather than links to results pages) 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) differently. 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’re in control of the full rendering of your autocomplete experience, and the library provides everything you need to make it functional and accessible. 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. Ready to learn more? Move on to Getting started to see a basic example in action.
⌘I