UI Libraries / Autocomplete / getAlgoliaFacets

getAlgoliaFacets

A

The getAlgoliaFacets function lets you query facet hits several Algolia indices at once.

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# A

First, you need to install the preset.

Copy 
1
2
3

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

Then import it in your project:

Copy 
1

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

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

Copy 
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# A

Copy 
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# A

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.

Copy 
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:

Copy 
1
2
3
4
5
6

getAlgoliaFacets({
  // ...
  transformResponse({ facetHits }) {
    return facetHits;
  },
});

Returns# A

The function returns a description with the following interface:

Copy 
1
2
3
4
5
6

{
  searchClient: SearchClient;
  queries: MultipleQueriesQuery[];
  transformResponse: TransformResponse<THit>;
  execute: Execute<THit>;
}
Previous
getAlgoliaResults
Next
parseAlgoliaHitHighlight
Did you find this page helpful?