Autocomplete Library for Javascript

Autocomplete Library for Javascript

Autocomplete Front-End Library for Vanilla JavaScript

Sign up

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

  • Any Virtual DOM solution (JavaScript, Preact, React, Vue, etc.)
  • InstantSearch for React, Vue, vanilla 
  • Search, Insights, and Recommend APIs

Key links


Get started

HTML

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});

Built with JavaScript on Algolia