Autocomplete

Autocomplete component with live search and suggestion list while typing. Provides keyboard navigation and debounced search.

Basic Autocomplete

Fruit Search


          <.autocomplete id="search-users" field={@form[:user]} options={users} />

With Form Field


          <.autocomplete id="product-search" field={@form[:product]} options={products} min_chars={2} />

With Custom Options


          <.autocomplete
            id="user-search"
            options={[{"John Doe", "1"}, {"Jane Smith", "2"}]}
            max_results={5}
          />

Props

Prop	Type	Default	Description
id	string	-	Unique ID for the autocomplete
field	Phoenix.HTML.FormField	nil	Form field struct (optional)
options	list	-	List of options (strings or label-value tuples)
min_chars	integer	1	Minimum characters before showing suggestions
max_results	integer	10	Maximum number of suggestions to show