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

# AutoComplete

> Documentation for AutoComplete

export const PLAYGROUND_BASE_URL = "https://playground.stac.dev/";

export const autoCompletePreviewJson = {
  "type": "autoComplete",
  "options": ["Option 1", "Option 2", "Option 3"],
  "onSelected": {
    "type": "callback",
    "name": "onOptionSelected"
  },
  "optionsMaxHeight": 250,
  "optionsViewOpenDirection": "up",
  "initialValue": "Option 1"
};
export const autoCompletePreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

The Stac AutoComplete allows you to build a Flutter AutoComplete widget using JSON.
To know more about the AutoComplete widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/Autocomplete-class.html).

## Properties

| Property                 | Type                           | Description                                                                                 |
| ------------------------ | ------------------------------ | ------------------------------------------------------------------------------------------- |
| options                  | `List<String>`                 | The list of options for the autocomplete.                                                   |
| onSelected               | `StacAction`                   | The callback that is called when an option is selected.                                     |
| optionsMaxHeight         | `double`                       | The maximum height of the options list. Defaults to `200`.                                  |
| optionsViewOpenDirection | `StacOptionsViewOpenDirection` | The direction in which the options view opens. Defaults to `OptionsViewOpenDirection.down`. |
| initialValue             | `String`                       | The initial value of the autocomplete field.                                                |

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacAutoComplete(
      options: ['Option 1', 'Option 2', 'Option 3'],
      onSelected: {'type': 'callback', 'name': 'onOptionSelected'},
      optionsMaxHeight: 250,
      optionsViewOpenDirection: StacOptionsViewOpenDirection.up,
      initialValue: 'Option 1',
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "autoComplete",
      "options": [
        "Option 1",
        "Option 2",
        "Option 3"
      ],
      "onSelected": {
        "type": "callback",
        "name": "onOptionSelected"
      },
      "optionsMaxHeight": 250,
      "optionsViewOpenDirection": "up",
      "initialValue": "Option 1"
    }
    ```
  </Tab>

  <Tab title="Preview">
    <Frame>
      <iframe
        id="stac"
        src={autoCompletePreviewSrc}
        title="Stac Playground"
        className="w-full rounded-xl border-0"
        style={{ height: "640px" }}
        loading="lazy"
        onLoad={(event) => {
      const iframe = event.currentTarget;
      const targetOrigin = PLAYGROUND_BASE_URL;
      const message = {
        type: "stac-preview-json",
        payload: autoCompletePreviewJson
      };

      let attempts = 0;
      const maxAttempts = 12;
      const interval = setInterval(() => {
        iframe.contentWindow?.postMessage(message, targetOrigin);
        attempts += 1;

        if (attempts >= maxAttempts) {
          clearInterval(interval);
        }
      }, 250);
    }}
      />
    </Frame>
  </Tab>
</Tabs>