@algolia/autocomplete-js

Basic Autocomplete Setup

This code sets up a basic autocomplete interface with a static list of items. The `autocomplete` function initializes the autocomplete widget, and the `getSources` method defines the data sources for the autocomplete suggestions.

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

autocomplete({
  container: '#autocomplete',
  getSources() {
    return [
      {
        sourceId: 'example-source',
        getItems() {
          return [
            { label: 'Item 1' },
            { label: 'Item 2' },
            { label: 'Item 3' }
          ];
        },
        templates: {
          item({ item }) {
            return item.label;
          }
        }
      }
    ];
  }
});
```

Using Algolia Search API

This example demonstrates how to integrate the autocomplete widget with Algolia's search API. The `getItems` method performs a search query using Algolia's client and returns the search results as autocomplete suggestions.

```javascript
import { autocomplete } from '@algolia/autocomplete-js';
import algoliasearch from 'algoliasearch/lite';

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

autocomplete({
  container: '#autocomplete',
  getSources() {
    return [
      {
        sourceId: 'products',
        getItems({ query }) {
          return searchClient
            .initIndex('products')
            .search(query)
            .then(({ hits }) => hits);
        },
        templates: {
          item({ item }) {
            return item.name;
          }
        }
      }
    ];
  }
});
```

Customizing Autocomplete Templates

This code sample shows how to customize the templates used for rendering autocomplete suggestions. The `item` template is modified to include both a label and a description for each suggestion.

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

autocomplete({
  container: '#autocomplete',
  getSources() {
    return [
      {
        sourceId: 'example-source',
        getItems() {
          return [
            { label: 'Item 1', description: 'Description 1' },
            { label: 'Item 2', description: 'Description 2' },
            { label: 'Item 3', description: 'Description 3' }
          ];
        },
        templates: {
          item({ item }) {
            return `<div>
                      <strong>${item.label}</strong>
                      <p>${item.description}</p>
                    </div>`;
          }
        }
      }
    ];
  }
});
```