# `PhiaUi.Components.AutocompleteInput`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/inputs/autocomplete_input.ex#L1)

Text input with HTML5 datalist suggestions.

Provides `autocomplete_input/1` — a standard text input wired to a native
HTML `<datalist>` element. As the user types, the browser shows matching
suggestions from the list. No JavaScript required — it is entirely native
browser behaviour.

Also provides `form_autocomplete_input/1` for changeset-integrated forms.

## When to use

Use `autocomplete_input/1` when you need:
- Simple suggestion lists (country, city, language, skill, tag)
- Non-enforced suggestions — users can still type anything not in the list
- The lightest possible implementation without a combobox or multi-select

For enforced option selection use `phia_select/1`. For complex search with
remote options use `combobox/1`.

## Basic usage

    <.autocomplete_input
      name="country"
      value={@country}
      placeholder="Start typing a country..."
      suggestions={["Brazil", "Canada", "France", "Germany", "United States"]}
      phx-change="update_country"
    />

## Dynamic suggestions from assigns

    <.autocomplete_input
      name="language"
      value={@language}
      suggestions={@available_languages}
      phx-change="update_language"
    />

## Form-integrated

    <.form_autocomplete_input
      field={@form[:city]}
      label="City"
      suggestions={@cities}
      phx-change="validate"
    />

# `autocomplete_input`

Renders a text input with native browser datalist suggestions.

The `<datalist>` id is derived from the input's id so they are automatically
linked via the `list` attribute. The browser handles rendering and filtering
of suggestions natively — no JS needed.

## Examples

    <.autocomplete_input
      name="framework"
      value={@framework}
      suggestions={["React", "Vue", "Svelte", "Elixir"]}
      placeholder="Select a framework..."
    />

## Attributes

* `id` (`:string`) - HTML id for the `<input>`. Auto-generated if nil. Also used to link the datalist. Defaults to `nil`.
* `name` (`:string`) - HTML name attribute. Defaults to `nil`.
* `value` (`:string`) - Current input value. Defaults to `nil`.
* `suggestions` (`:list`) - List of suggestion strings (or `{label, value}` tuples) rendered as
  `<option>` elements inside the `<datalist>`. The browser uses these
  as autocomplete candidates.

  Defaults to `[]`.
* `placeholder` (`:string`) - Placeholder text shown when the input is empty. Defaults to `nil`.
* `disabled` (`:boolean`) - Disables the input. Defaults to `false`.
* `class` (`:string`) - Additional CSS classes merged into the `<input>` element. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the `<input>` element. Supports all globals plus: `["phx-change", "phx-debounce", "phx-keydown", "required", "readonly", "autocomplete", "autofocus"]`.

# `form_autocomplete_input`

Renders a form-integrated autocomplete input with label and error messages.

## Examples

    <.form_autocomplete_input
      field={@form[:country]}
      label="Country"
      suggestions={@countries}
    />

## Attributes

* `field` (`Phoenix.HTML.FormField`) (required) - A `Phoenix.HTML.FormField` struct from `@form[:field_name]`.
* `label` (`:string`) - Label text rendered above the input. Defaults to `nil`.
* `description` (`:string`) - Helper text rendered below the label. Defaults to `nil`.
* `suggestions` (`:list`) - List of suggestion strings or `{label, value}` tuples. Defaults to `[]`.
* `class` (`:string`) - Additional CSS classes merged into the `<input>` element. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to `autocomplete_input/1`. Supports all globals plus: `["phx-change", "phx-debounce", "placeholder", "disabled", "required", "readonly"]`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*