What is Autocomplete?

Autocomplete is an open source, production-ready JavaScript library for building autocomplete experiences.

A user types into an input, and the autocomplete “completes” their thought by providing full terms or results: this is the very base of an autocomplete experience.

For example, try typing the letter “m” in the search box below.

You can select suggestions like “macbook” and “mobile”. If you continue typing, say “mi”, the results update. You see suggestions like “microphone,” “microsoft,” and “microscopes.”

Autocomplete is now a ubiquitous part of most search experiences. Search providers like Google, ecommerce sites like Amazon, and messaging apps like Slack all offer autocomplete experiences on mobile and desktop.

While the preceding search experience displays completed search terms, autocomplete experiences frequently show search results.

For example, try typing the letter “m” again in the search box below.

This experience minimizes typing, which is particularly impactful on mobile. It enables users to find what they’re looking for quicker. It also exposes them to searches, products, or pages they didn’t think of but are interested in anyway.

You may have already used Autocomplete-powered UIs. The Algolia documentation you’re reading right now, React Native, Tailwind CSS, and other documentation websites use Autocomplete via the Algolia DocSearch project. This library is flexible enough to power more than just documentation search though. 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 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.