Skip to main content
You may want to change which 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:
JavaScript
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. You should change the container to match your markup. Setting openOnFocus to true ensures that the drop-down menu appears as soon as a user focuses the input.

​
Implement the empty query state

JavaScript
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 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, and Query Suggestions 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.

​
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.
JavaScript
// ...

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 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, such as the query, Autocomplete status, whether the Autocomplete display panel is open or not, and the context.
⌘I