Skip to content
next
Switch branches/tags
Code

Latest commit

…getItems` (#607)

* fix: trigger invariant when user doesn't return anything from getItems

* tests: test invariant when not returning from getItems

* fix: remove pre-resolve invariant

* feat: check that every item is truthy in post-resolve invariant

* fix: rmeove unused dependency

* feat: add sourceId in error message

* feat: use second invariant for undefined items

* feat: add link to docs in invariant
e019b4d

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Autocomplete

A JavaScript library that lets you quickly build autocomplete experiences

Version MIT License

All you need to get started is:

  • A container to inject the experience into
  • Data to fill the autocomplete with
  • Any Virtual DOM solution (JavaScript, Preact, React, Vue, etc.)

The data that populates the autocomplete results are called sources. You can use whatever you want in your sources: a static set of searches terms, search results from an external source like an Algolia index, recent searches, and more.

By configuring just those two required parameters (container and getSources) you can have an interactive autocomplete experience. The library creates an input and provides the interactivity and accessibility attributes, but you're in full control of the DOM elements to output.

Screenshot

DocumentationAPIPlayground

Installation

The recommended way to get started is with the autocomplete-js package. It includes everything you need to render a JavaScript autocomplete experience.

Otherwise, you can install the autocomplete-core package if you want to build a renderer from scratch.

All Autocomplete packages are available on the npm registry.

yarn add @algolia/autocomplete-js
# or
npm install @algolia/autocomplete-js

If you don't use a package manager, you can use the HTML script element:

<script src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-js"></script>
<script>
  const { autocomplete } = window['@algolia/autocomplete-js'];
</script>

Usage

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:

<div id="autocomplete"></div>

Then, insert your autocomplete into it by calling the autocomplete function and providing the container. It can be a CSS selector or an Element.

Make sure to provide a container (e.g., a div), not an input. Autocomplete generates a fully accessible search box for you.

import { autocomplete } from '@algolia/autocomplete-js';

autocomplete({
  container: '#autocomplete',
  // ...
});

Continue reading our Getting Started guide.

Documentation

The 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.

You can find more on the documentation.

Support

Packages

Package Description Documentation
autocomplete-js JavaScript package for Autocomplete Documentation
autocomplete-core JavaScript core primitives to build an autocomplete experience Documentation
autocomplete-plugin-recent-searches A plugin to add recent searches to Autocomplete Documentation
autocomplete-plugin-query-suggestions A plugin to add query suggestions to Autocomplete Documentation
autocomplete-plugin-algolia-insights A plugin to add Algolia Insights to Autocomplete Documentation
autocomplete-preset-algolia Presets to use Algolia features with Autocomplete Documentation
autocomplete-theme-classic Classic theme for Autocomplete Documentation

Showcase

See the awesome experiences people built with Autocomplete:

DocSearch Algolia Documentation

Find more in our Showcase.

Sandboxes

Check out sandboxes using Autocomplete.

License

MIT