getAlgoliaResults

The getAlgoliaResults function lets you query one or several Algolia indices.

Using getAlgoliaResults 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.

Copy

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

Then import it in your project:

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

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

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

Parameter	Description
`searchClient`	type: SearchClient Required The initialized Algolia search client.
`queries`	type: MultipleQueriesQuery[] Required The queries to perform.

queries ➔ queries

Parameter Description


            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
{
  "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
getAlgoliaResults({
  // ...
  transformResponse({ hits }) {
    return hits;
  },
});

Returns

The function returns a description with the following interface:

Copy
{
  searchClient: SearchClient;
  queries: MultipleQueriesQuery[];
  transformResponse: TransformResponse<THit>;
  execute: Execute<THit>;
}

autocomplete-preset-algolia

getAlgoliaFacets