UI libraries / Autocomplete / API reference / autocomplete-preset-algolia

The getAlgoliaFacets function lets you query facet hits from one or several Algolia indices.

Using getAlgoliaFacets lets Autocomplete batch all queries using the same search client into a single network call, and thus minimize search unit consumption. It also works out of the box with the components exposed in templates.

If you’re using autocomplete-js, all Algolia utilities are available directly in the package with the right user agents and the virtual DOM layer. You don’t need to import the preset separately.

Installation

First, you need to install the preset.

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

Then import it in your project:

1
import { getAlgoliaFacets } from '@algolia/autocomplete-preset-algolia';

If you don’t use a package manager, you can use the HTML script element:

1
2
3
4
<script src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-preset-algolia"></script>
<script>
  const { getAlgoliaFacets } = window['@algolia/autocomplete-preset-algolia'];
</script>

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import algoliasearch from 'algoliasearch/lite';
import { createAutocomplete } from '@algolia/autocomplete-core';
import { getAlgoliaResults } from '@algolia/autocomplete-preset-algolia';

const searchClient = algoliasearch(
  'latency',
  '6be0576ff61c053d5f9a3225e2a90f76'
);

const autocomplete = createAutocomplete({
  // ...
  getSources() {
    return [
      {
        sourceId: 'categories',
        getItems({ query }) {
          return getAlgoliaFacets({
            searchClient,
            queries: [
              {
                indexName: 'instant_search',
                facet: 'categories',
                params: {
                  facetQuery: query,
                  maxFacetHits: 10,
                },
              },
            ],
          });
        },
        // ...
      },
    ];
  },
});

Parameters

searchClient
type: SearchClient
Required

The initialized Algolia search client.

queries
type: FacetQuery[]
Required

The queries to search for.

queries ➔ queries

indexName
type: string
Required

The index name.

facet
type: string
Required

The attribute name to search facet values into.

Note that for this to work, it must be declared in the attributesForFaceting index setting with the searchable() modifier.

params
type: SearchForFacetValuesQueryParams

Algolia search for facet values parameters.

These are the default parameters. You can leave them as is and specify other parameters, or override them.

1
2
3
4
{
  "highlightPreTag": "__aa-highlight__",
  "highlightPostTag": "__/aa-highlight__"
}

If you override highlightPreTag and highlightPostTag, you won’t be able to use the built-in highlighting components such as Highlight.

transformResponse
type: (response: { results: Array<SearchResponse<THit> | SearchForFacetValuesResponse>, hits: MaybeArray<Hit<THit>[]>, facetHits: MaybeArray<FacetHit[]> }) => MaybeArray<Hit<THit>[] | FacetHit[]>

The function to transform the Algolia response before passing it to the Autocomplete state. You have access to the full Algolia results, as well as the pre-computed hits and facet hits. This is useful to manipulate the hits, or store data from the results in the context.

This is the default implementation:

1
2
3
4
5
6
getAlgoliaFacets({
  // ...
  transformResponse({ facetHits }) {
    return facetHits;
  },
});

Returns

The function returns a description with the following interface:

1
2
3
4
5
6
{
  searchClient: SearchClient;
  queries: MultipleQueriesQuery[];
  transformResponse: TransformResponse<THit>;
  execute: Execute<THit>;
}
Did you find this page helpful?