@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