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

# Basic configuration options

> Everything you need to create fantastic autocomplete experiences.

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

Autocomplete gives you unlimited flexibility while freeing you from having to think about things like keyboard navigation, accessibility, or UI state.
**The library offers a wide variety of APIs to let you fully customize the behavior and rendering of your autocomplete.**

<Card title="Open CodeSandbox" icon="codesandbox" href="https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/starter?file=/app.tsx">
  Run and edit the Basic configuration options example in CodeSandbox.
</Card>

Only two parameters are required to create an autocomplete:

* The **container** you want your autocomplete to go in.
* The **sources** from which to get the items to display (see more in [Sources](/doc/ui-libraries/autocomplete/core-concepts/sources)).

<CodeGroup>
  ```js JavaScript theme={"system"}
  import { autocomplete } from "@algolia/autocomplete-js";

  autocomplete({
    container: "#autocomplete",
    getSources() {
      return [
        {
          sourceId: "links",
          getItems({ query }) {
            const items = [
              { label: "Twitter", url: "https://twitter.com" },
              { label: "GitHub", url: "https://github.com" },
            ];

            return items.filter(({ label }) =>
              label.toLowerCase().includes(query.toLowerCase()),
            );
          },
          getItemUrl({ item }) {
            return item.url;
          },
          templates: {
            item({ item }) {
              return item.label;
            },
          },
        },
      ];
    },
  });
  ```

  ```ts TypeScript theme={"system"}
  import { autocomplete } from "@algolia/autocomplete-js";

  type AutocompleteItem = {
    label: string;
    url: string;
  };

  autocomplete<AutocompleteItem>({
    container: "#autocomplete",
    getSources() {
      return [
        {
          sourceId: "links",
          getItems({ query }) {
            const items = [
              { label: "Twitter", url: "https://twitter.com" },
              { label: "GitHub", url: "https://github.com" },
            ];

            return items.filter(({ label }) =>
              label.toLowerCase().includes(query.toLowerCase()),
            );
          },
          getItemUrl({ item }) {
            return item.url;
          },
          templates: {
            item({ item }) {
              return item.label;
            },
          },
        },
      ];
    },
  });
  ```
</CodeGroup>

The `container` option refers to where to inject the autocomplete in your HTML.
It can be a [CSS selector](https://developer.mozilla.org/docs/Web/CSS/CSS_Selectors)
or an [Element](https://developer.mozilla.org/docs/Web/API/HTMLElement).
Make sure to provide a container (like a `div`), not an `input`.
Autocomplete generates a fully accessible search box for you.

```html HTML icon=code-xml theme={"system"}
<div id="autocomplete"></div>
```

Now, this is a great start, but you can go much further.
Here are some options you'll probably want to use next:

* Use [`placeholder`](/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete#param-placeholder) to define the text that appears in the input before users type anything.
* Use [`autoFocus`](/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete#param-auto-focus) to focus on the search box on page load, and [`openOnFocus`](/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete#param-open-on-focus) to display items as soon as a user selects the autocomplete, even without typing.
* Use the [`onStateChange`](/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete#param-on-state-change) lifecycle hook to run code whenever the state changes.
* Use [`debug: true`](/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete#param-debug) to keep the autocomplete panel open even when the blur event occurs (see [Debugging](/doc/ui-libraries/autocomplete/guides/debugging)).

For a full list of all available parameters,
see the [API reference](/doc/ui-libraries/autocomplete/api-reference/autocomplete-js).