@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

The autocomplete-core package is the foundation of Autocomplete. It exposes primitives to build an autocomplete experience.

You likely don’t need to use this package directly unless you’re building a renderer.

Installation

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

Documentation

See Documentation.

Changelog

1.17.7 (2024-11-05)

Bug Fixes

• plugins: add translations for query suggestions and recent searches plugins (#1283) (572cd3c), closes #1282