UI Libraries / Autocomplete / getAlgoliaResults

getAlgoliaResults

The getAlgoliaResults function lets you query 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#

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 { getAlgoliaResults } 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 { getAlgoliaResults } = window['@algolia/autocomplete-preset-algolia'];
</script>

Example#

This example uses the function along with the algoliasearch API client.

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

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: 'products',
        getItems({ query }) {
          return getAlgoliaResults({
            searchClient,
            queries: [
              {
                indexName: 'instant_search',
                query,
                params: {
                  hitsPerPage: 5,
                },
              },
            ],
          });
        },
        // ...
      },
    ];
  },
});

Parameters#

searchClient #
type: SearchClient
Required

The initialized Algolia search client.
queries #
type: MultipleQueriesQuery[]
Required

The queries to perform.

queries ➔ queries #

indexName #
type: string
Required

The index name to search into.
query #
type: string

The query to search for.
params #
type: SearchParameters

Algolia search parameters.

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

Copy 
1
2
3
4
5

{
  "hitsPerPage": 5,
  "highlightPreTag": "__aa-highlight__",
  "highlightPostTag": "__/aa-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

getAlgoliaResults({
  // ...
  transformResponse({ hits }) {
    return hits;
  },
});

Returns#

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
autocomplete-preset-algolia
Next
getAlgoliaFacets
Did you find this page helpful?