@algolia/autocomplete-core

What is @algolia/autocomplete-core?

@algolia/autocomplete-core is a headless autocomplete library that provides the core logic and state management for building autocomplete experiences. It allows developers to create highly customizable and accessible autocomplete components without being tied to a specific UI framework.

What are @algolia/autocomplete-core's main functionalities?

Basic Autocomplete Setup

This code sets up a basic autocomplete instance with a single source of items. The `onStateChange` function logs the current state of the autocomplete, and the `getSources` function returns a list of items based on the query.

const { createAutocomplete } = require('@algolia/autocomplete-core');

const autocomplete = createAutocomplete({
  onStateChange({ state }) {
    console.log(state); // Logs the current state of the autocomplete
  },
  getSources() {
    return [
      {
        sourceId: 'example-source',
        getItems({ query }) {
          return [
            { label: 'Item 1' },
            { label: 'Item 2' },
            { label: 'Item 3' }
          ];
        }
      }
    ];
  }
});

Customizing Autocomplete Items

This code demonstrates how to customize the items in the autocomplete dropdown. It fetches items from an external API based on the query and uses a custom template to render each item.

const { createAutocomplete } = require('@algolia/autocomplete-core');

const autocomplete = createAutocomplete({
  onStateChange({ state }) {
    console.log(state); // Logs the current state of the autocomplete
  },
  getSources() {
    return [
      {
        sourceId: 'custom-source',
        getItems({ query }) {
          return fetch(`https://api.example.com/search?q=${query}`)
            .then(response => response.json())
            .then(data => data.items);
        },
        templates: {
          item({ item }) {
            return `<div>${item.label}</div>`;
          }
        }
      }
    ];
  }
});

Handling Multiple Sources

This code shows how to handle multiple sources in the autocomplete. Each source fetches items from a different API endpoint based on the query.

const { createAutocomplete } = require('@algolia/autocomplete-core');

const autocomplete = createAutocomplete({
  onStateChange({ state }) {
    console.log(state); // Logs the current state of the autocomplete
  },
  getSources() {
    return [
      {
        sourceId: 'source-1',
        getItems({ query }) {
          return fetch(`https://api.example.com/source1?q=${query}`)
            .then(response => response.json())
            .then(data => data.items);
        }
      },
      {
        sourceId: 'source-2',
        getItems({ query }) {
          return fetch(`https://api.example.com/source2?q=${query}`)
            .then(response => response.json())
            .then(data => data.items);
        }
      }
    ];
  }
});

Other packages similar to @algolia/autocomplete-core

downshift

Downshift is a library that provides primitives to build flexible and accessible autocomplete, combobox, and select components. It offers more control over the rendering and behavior of the components compared to @algolia/autocomplete-core, but requires more setup and customization.

react-autosuggest

React Autosuggest is a library for building autocomplete components in React. It provides a higher-level abstraction compared to @algolia/autocomplete-core, making it easier to get started but less flexible in terms of customization and control over the autocomplete logic.

react-instantsearch

React InstantSearch is a library by Algolia that provides a set of React components to build search interfaces. It is more opinionated and higher-level compared to @algolia/autocomplete-core, offering built-in components for common search use cases but less flexibility for custom autocomplete implementations.

README

@algolia/autocomplete-core

Core primitives for building autocomplete experiences.

Installation

yarn add @algolia/autocomplete-core@alpha
# or
npm install @algolia/autocomplete-core@alpha

Documentation

Read documentation →

Changelog

1.0.0-alpha.41 (2021-02-09)

Bug Fixes

• core: don't open panel with openOnFocus without items (fde8b8a)
• core: rename OnHighlightParams to OnActiveParams (2d7762d)
• js: add footer template (b2223d5)
• js: add key props to highlight children (11e5667)
• js: forward TData type to AutocompletePlugin (f62cb36)
• js: use AutocompletePlugin type from JS (ba3cda5)
• plugins: pass createElement to highlight utils (11f4cb7)

Features

• emptyStates: implements empty source template and renderEmpty method (#395) (fbfca35)
• js: wrap item action buttons in container (#434) (0032f38)
• plugin: add transformSource API (fbd9e72)
• sourceId: add sourceId to provide data-autocomplete-source-id on section source container (#429) (ce35fea)
• theme: add aa-ItemWrapper CSS class (a56c9d4)