@algolia/autocomplete-preset-algolia

What is @algolia/autocomplete-preset-algolia?

@algolia/autocomplete-preset-algolia is a preset for Algolia's Autocomplete library that provides a set of default configurations and sources to quickly set up an autocomplete experience with Algolia's search capabilities.

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

Basic Autocomplete Setup

This code sets up a basic autocomplete experience using Algolia's search client and the preset provided by @algolia/autocomplete-preset-algolia. It initializes the autocomplete with a container and the necessary search client and index name.

const { autocomplete } = require('@algolia/autocomplete-js');
const { createAlgoliaPreset } = require('@algolia/autocomplete-preset-algolia');

const searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey');

autocomplete({
  container: '#autocomplete',
  presets: [
    createAlgoliaPreset({
      searchClient,
      indexName: 'your_index_name',
    }),
  ],
});

Customizing Autocomplete Sources

This code demonstrates how to customize the sources for the autocomplete. It uses the `getSources` function to define a custom source that queries the Algolia index and returns items based on the search query.

const { autocomplete } = require('@algolia/autocomplete-js');
const { createAlgoliaPreset } = require('@algolia/autocomplete-preset-algolia');

const searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey');

autocomplete({
  container: '#autocomplete',
  presets: [
    createAlgoliaPreset({
      searchClient,
      indexName: 'your_index_name',
      getSources({ query }) {
        return [
          {
            sourceId: 'products',
            getItems() {
              return searchClient.search([{ indexName: 'your_index_name', query }]);
            },
            templates: {
              item({ item }) {
                return `<div>${item.name}</div>`;
              },
            },
          },
        ];
      },
    }),
  ],
});

Other packages similar to @algolia/autocomplete-preset-algolia

react-autosuggest

react-autosuggest is a React component for building autocomplete and autosuggest functionality. It is highly customizable and can be used with any data source. Unlike @algolia/autocomplete-preset-algolia, it does not come with built-in support for Algolia's search client.

downshift

downshift is a library that provides primitives to build flexible autocomplete, combobox, dropdown, and select components in React. It offers more control over the rendering and behavior of the components compared to @algolia/autocomplete-preset-algolia, which is more opinionated and tailored for Algolia's search.

autocomplete.js

autocomplete.js is a JavaScript library for building autocomplete experiences. It is highly customizable and can be integrated with various data sources, including Algolia. However, it requires more manual setup compared to @algolia/autocomplete-preset-algolia, which provides a preset configuration for Algolia's search.

README

@algolia/autocomplete-preset-algolia

The Algolia preset provides fetching and highlighting utilities for usage with Algolia.

Installation

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

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