> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Implement multiple search states

> Learn how to show different search states depending on the query or results.

export const Index = () => <Tooltip tip="An Algolia index is a searchable dataset that consists of records and configuration settings. These settings define how the records are searched and ranked.">
    index
  </Tooltip>;

<Tip>
  Autocomplete is also available as an experimental widget in InstantSearch,
  making it easier to integrate into your search experience.
  For more information,
  see the API reference for [InstantSearch.js](/doc/api-reference/widgets/autocomplete/js) or
  [React InstantSearch](/doc/api-reference/widgets/autocomplete/react).
</Tip>

You may want to change which [sources](/doc/ui-libraries/autocomplete/core-concepts/sources) you use depending on the query or the number of results.
A typical pattern is to display a different source when the query is empty and switch once users start typing.
Or display a no results message when the current query doesn't match any results.

This guide explains how to conditionally display specific sources when the query is empty or returns no results.

## Before you begin

This guide assumes that you know HTML, CSS, and JavaScript and that you have existing HTML with an input element where you want to insert the autocomplete drop-down menu.

## Get started

First, begin with some code for the Autocomplete implementation.
Create a file called `index.js` in your `src` directory, and add:

```js JavaScript icon=code theme={"system"}
import { autocomplete } from "@algolia/autocomplete-js";

import "@algolia/autocomplete-theme-classic";

autocomplete({
  container: "#autocomplete",
  placeholder: "Search for products",
  openOnFocus: true,
});
```

This code assumes you want to insert Autocomplete into a DOM element with `autocomplete` as an [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
You should change the [`container`](/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete#param-container) to [match your markup](/doc/ui-libraries/autocomplete/core-concepts/basic-configuration-options).
Setting [`openOnFocus`](/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete#param-open-on-focus) to `true` ensures that the drop-down menu appears as soon as a user focuses the input.

## Implement the empty query state

```js JavaScript icon=code theme={"system"}
import { liteClient as algoliasearch } from "algoliasearch/lite";
import { autocomplete, getAlgoliaResults } from "@algolia/autocomplete-js";

import "@algolia/autocomplete-theme-classic";

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

autocomplete({
  container: "#autocomplete",
  placeholder: "Search for products",
  openOnFocus: true,
  getSources({ query }) {
    if (!query) {
      return [
        {
          sourceId: "links",
          getItems() {
            return [
              { label: "Shipping", url: "#shipping" },
              { label: "Contact", url: "#contact" },
            ];
          },
          getItemUrl({ item }) {
            return item.url;
          },
          templates: {
            item({ item }) {
              return item.label;
            },
          },
        },
      ];
    }

    return [
      {
        sourceId: "products",
        getItems() {
          return getAlgoliaResults({
            searchClient,
            queries: [
              {
                indexName: "instant_search",
                query,
              },
            ],
          });
        },
        getItemUrl({ item }) {
          return item.url;
        },
        templates: {
          item({ item }) {
            return item.name;
          },
        },
      },
    ];
  },
});
```

The [`getSources`](/doc/ui-libraries/autocomplete/core-concepts/sources#param-get-sources) function provides access to the current `query`, which you can use to return sources conditionally.
You can use this pattern to display predefined items like these, [recent searches](/doc/ui-libraries/autocomplete/guides/adding-recent-searches), and [Query Suggestions](/doc/ui-libraries/autocomplete/guides/adding-suggested-searches) when the query is empty.
When users begin to type, you can show search results.

When there isn't a query, this Autocomplete instance returns useful links.
When there is, it searches an Algolia <Index />.
For more information about using Algolia as a source, see [Get started with Autocomplete](/doc/ui-libraries/autocomplete/introduction/getting-started).

## Implement the no results search state

Now that you can display a custom source when the query is empty, you can display a message if the query returned no results.

```js JavaScript icon=code theme={"system"}
// ...

autocomplete({
  container: "#autocomplete",
  placeholder: "Search for products",
  openOnFocus: true,
  getSources({ query }) {
    // ...
  },
  renderNoResults({ render, html, state }, root) {
    render(
      html`
        <div class="aa-PanelLayout aa-Panel--scrollable">
          No results for "${state.query}".
        </div>
      `,
      root,
    );
  },
});
```

The [`renderNoResults`](/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete#param-render-no-results) function provides a way to render a no results section when there are no hits.

You have access to the full Autocomplete state.
It lets you compute sources based on [various parameters](/doc/ui-libraries/autocomplete/core-concepts/state),
such as the query, Autocomplete status, whether the Autocomplete display panel is open or not,
and the [context](/doc/ui-libraries/autocomplete/core-concepts/context).