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 Javascript library is
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});
Create a typeahead experience using Autocomplete and InstantSearch library
Typeahead dropdown playground built with the Algolia Autocomplete library
Typeahead dropdown menu with suggested searches built with Algolia Autocomplete