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 is a hosted, API-first platform used to build world-class search & discovery experiences. 

Start building quickly using libraries for every major language and framework. Scale your solution with a platform that serves over 85 billion queries for more than 13k customers every month.

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

Frontend Tools
Code samples

Autocomplete with InstantSearch

Create a typeahead experience using Autocomplete and InstantSearch library

  • javascript
  • nodejs