Repolode
Submit
algolia

algolia/autocomplete

A JavaScript library for building autocomplete and typeahead search boxes, with your own sources and DOM rendering.

View on GitHubWebsite
Stars
5,265
Forks
339
Open issues
37
Last commit
15 days ago

What is it?

Autocomplete is a JavaScript library for building autocomplete search experiences. You provide a container element and a getSources function that returns the suggestions to display; the library creates the input and handles keyboard interaction and accessibility attributes, while you control the markup of the results.

Sources can be anything: a static list of search terms, results from an Algolia index, recent searches, or data from any other API. The project is split into a core package for building custom renderers and a ready-to-use autocomplete-js package, plus plugins for recent searches, query suggestions, Algolia Insights, redirect URLs and tags.

The library works with any virtual DOM solution, including plain JavaScript, Preact, React and Vue, and is distributed through npm or a CDN script tag.

Key features

  • 01Requires only a container and a getSources function to get a working search box.
  • 02Generates an accessible input with keyboard navigation and ARIA attributes.
  • 03Lets you render results with your own DOM markup.
  • 04Provides plugins for recent searches, query suggestions, and Algolia Insights.
  • 05Works with plain JavaScript, Preact, React, and Vue.

Use cases

  • Adding a search-as-you-type box to a documentation site or content website.
  • Showing recent searches and query suggestions in a site search bar.
  • Building a custom combobox or command palette with your own result rendering.

Quick start

  1. 1

    Install the autocomplete-js package with npm

    npm install @algolia/autocomplete-js
  2. 2

    Add a container div to your HTML

  3. 3

    Import autocomplete and call it with the container and getSources options

Things to know

  • Requires you to write your own sources and rendering for results beyond the basic setup.

Topics

#autocomplete#typeahead#search#javascript#combobox#accessibility#ui-component#accessible#alfred#algolia

FAQ

What is autocomplete?
A JavaScript library for building autocomplete and typeahead search boxes, with your own sources and DOM rendering. Autocomplete is a JavaScript library for building autocomplete search experiences. You provide a container element and a getSources function that returns the suggestions to display; the library creates the input and handles keyboard interaction and accessibility attributes, while you control the markup of the results.
Is autocomplete free to use? What license does it have?
autocomplete is open source under the MIT license. Check the license terms before using it in commercial products.
Is autocomplete still maintained?
Actively maintained. The last commit to autocomplete was on Oct 7, 2026.
What can I use autocomplete for?
Adding a search-as-you-type box to a documentation site or content website. Showing recent searches and query suggestions in a site search bar. Building a custom combobox or command palette with your own result rendering.
How do I install autocomplete?
Install the autocomplete-js package with npm: npm install @algolia/autocomplete-js Add a container div to your HTML Import autocomplete and call it with the container and getSources options
Where can I get autocomplete?
The source code and installation instructions are on GitHub: https://github.com/algolia/autocomplete

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects