Developer Hub

Autocomplete Library for Javascript

Javascript + Autocomplete

Build search experiences with UI components and libraries.

Sign up
A computer on a search page, with recommendations being inserted on the side

What is Algolia

Algolia empowers modern developers to build world class search and discovery experiences without any DevOps. 

Libraries with every major language and framework make it easy to enrich your users' experiences. 

Autocomplete Library for Javascript

Add autocomplete to your javascript applications

Autocomplete Javascript library is

  • An open source, production-ready library to build interactive, fully customizable autocomplete experiences - explore the showcase.
  • The library creates an input and provides the interactivity and accessibility attributes, but you’re in full control of the DOM elements to output.
  • Integrates with Instantsearch.js  

Features

  • Open source, production-ready JavaScript library
  • Works with multiple sources of data
  • Datasources can be static or dynamic
  • Supports promises to fetch sources from any asynchronous API
  • Provides a Templates API to customize the rendering
  • Manages state to give you control over the UI behavior 
  • Includes plugins for query suggestions, related searches, and sending Analytics events

Version

  • Works in node and all browsers (including IE11+)
  • Built with TypeScript

Related Integrations

Key links

Get started

HTML (get a free account here)

1 <body>
2    <header class="header">
3      <!--Replace searchbox with Autocomplete-->
4      <div id="autocomplete"></div>
5    </header>
6  </body>

Set up dependencies, authorization

1import { autocomplete } from '@algolia/autocomplete-js';
2import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';
3import algoliasearch from 'algoliasearch';
4
5import '@algolia/autocomplete-theme-classic';
6
7const appId = 'latency';
8const apiKey = '6be0576ff61c053d5f9a3225e2a90f76';
9const searchClient = algoliasearch(appId, apiKey);

JS - Autocomplete with Query Suggestions

1const querySuggestionsPlugin = createQuerySuggestionsPlugin({
2  searchClient,
3  indexName: 'instant_search_demo_query_suggestions',
4  getSearchParams() {
5    return {
6      hitsPerPage: 10,
7    };
8  },
9});
10
11autocomplete({
12  container: '#autocomplete',
13  placeholder: 'Search',
14  openOnFocus: true,
15  plugins: [querySuggestionsPlugin],
16});
Get started for freeExplore all developer docs

Built with JavaScript on Algolia

Showcase
Sample Applications

Autocomplete with InstantSearch

Create a typeahead experience using Autocomplete and InstantSearch library

  • javascript