Skip to main content
Autocomplete is also available as an experimental widget in InstantSearch, making it easier to integrate into your search experience. To learn more, see the API reference for InstantSearch.js or React InstantSearch.
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, you don’t need to import the preset separately. The package includes all Algolia utilities, with the appropriate user agents and virtual DOM support.

​
Installation

First, you need to install the preset. 
npm install @algolia/autocomplete-preset-algolia
Then import it in your project:
JavaScript
import { getAlgoliaResults } from "@algolia/autocomplete-preset-algolia";
If you don’t use a package manager, you can use the HTML script element:
HTML
<script
  src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-preset-algolia@1.19.4/dist/umd/index.production.js"
  integrity="sha256-hqqZsgytphUhmmnnfNd/A5wjXf0y4hifZNUTpRvy0wM="
  crossorigin="anonymous"
></script>
<script>
  const { getAlgoliaResults } = window["@algolia/autocomplete-preset-algolia"];
</script>

​
Example

This example uses the function along with the algoliasearch API client.
JavaScript
import { liteClient as 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",
                params: {
                  query,
                  hitsPerPage: 5,
                },
              },
            ],
          });
        },
        // ...
      },
    ];
  },
});

​
Parameters

​
searchClient
SearchClient
required
The initialized Algolia search client.
​
queries
MultipleQueriesQuery[]
required
The queries to perform.
​
transformResponse
function
Type definition
(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:
JavaScript
getAlgoliaResults({
  // ...
  transformResponse({ hits }) {
    return hits;
  },
});

​
Returns

The getAlgoliaResults function returns:
TypeScript
{
  searchClient: SearchClient;
  queries: MultipleQueriesQuery[];
  transformResponse: TransformResponse<THit>;
  execute: Execute<THit>;
}