Get started with Autocomplete by building an Algolia search experience.
This documentation offers a few ways to learn about the Autocomplete library:
- Read the Core Concepts to learn more about underlying principles, like Sources and State.
- Follow the Guides to understand how to build common UX patterns.
- Refer to API reference for a comprehensive list of parameters and options.
- Try out the Playground where you can fork a basic implementation and play around.
Keep reading to see how to install Autocomplete and build a basic implementation with Algolia.
The recommended way to get started is with the
All Autocomplete packages are available on the npm registry.
If you don't use a package manager, you can use the HTML
The Autocomplete library provides the
autocomplete-theme-classic package so that you can have sleek styling out of the box.
If you want a custom theme, you can use this classic theme and customize it with CSS variables. You can also create a new theme entirely using the classic theme as a starting point.
This example uses the out of the box classic theme. You can import it like any other Autocomplete package.
Then import it in your project:
If you don't use a package manager, you can link the stylesheet in your HTML:
We don't provide support regarding third party services like jsDeliver or other CDNs.
To get started, you need a container for your autocomplete to go in. If you don't have one already, you can insert one into your markup:
Make sure to provide a container (e.g., a
div), not an
input. Autocomplete generates a fully accessible search box for you.
Autocomplete is now plugged in. But you won't see anything appear until you define your sources.
getAlgoliaHits function requires an Algolia search client initialized with an Algolia application ID and API key. It lets you search into your Algolia index using an array of
queries, which defines one or more queries to send to the index.
This example makes just one query to the "autocomplete" index using the
getSources. For now, it passes one additional parameter,
hitsPerPage to define how many items to display, but you could pass any other Algolia query parameters.
Although you've now declared what items to display using
getSources, you still won't see anything until you've defined how to display the items you've retrieved.
Sources also define how to display items in your Autocomplete using
templates. Templates can return a string or anything that's a valid Virtual DOM element. The example creates a Preact component called
ProductItem to use as the template for each item.
classNames correspond to the classic theme imported earlier.
ProductItem component uses the
Snippet component to only display part of the item's name and description, if they go beyond a certain length. Each attribute's allowed length and the characters to show when truncated are defined in the
snippetEllipsisText Algolia query parameters in
This is what the truncated JSON record looks like:
Check out how the template displays items by searching in the input below:
Now give it a try: navigate to one of the items using your keyboard and hit Enter. This brings you to the product detail page on bestbuy.com.
This outlines a basic autocomplete implementation. There's a lot more you can do like:
- define templates for headers, footers, or when there's no results
- add multiple sources, including suggested searches and recent searches
- send Algolia Insights events when a user clicks on an item or adds it to their cart