LanternUI.Components.Autocomplete (LanternUI v0.8.2)

Copy Markdown View Source

A Fluxon-compatible autocomplete for static or LiveView-backed search.

<.autocomplete field={@form[:sku]} options={@sku_options} />
<.autocomplete name="user_id" options={@users} on_search="search_users" />

Static options are filtered in the browser. When on_search is set, the LiveView owns the options and receives %{"query" => query} after the configured threshold and debounce.

Fluxon-style {label, children} groups are recognized when children is a non-empty list of tuples. Use {:group, label, children} for empty groups or groups of scalar options; other list-valued tuples remain ordinary options. Animation attrs are accepted for Fluxon compatibility but are no-ops; Lantern's panel motion is CSS/token-driven, matching LanternUI.Components.Modal.

Summary

Functions

autocomplete(assigns)

Functions

autocomplete(assigns)

Attributes

  • id (:any) - Element id; derived from field when omitted. Defaults to nil.
  • name (:any) - Form input name; derived from field when omitted. Defaults to nil.
  • value (:any) - Current selected value. Defaults to nil.
  • field (Phoenix.HTML.FormField) - Form field; derives id, name, value, and errors. Defaults to nil.
  • options (:list) - Choices as values, tuples, tuple-child groups, or {:group, label, children}. Defaults to [].
  • label (:string) - Primary label above the control. Defaults to nil.
  • sublabel (:string) - Secondary label beside the primary label. Defaults to nil.
  • description (:string) - Description between label and control. Defaults to nil.
  • help_text (:string) - Help line shown when there are no errors. Defaults to nil.
  • placeholder (:string) - Placeholder shown in the search input. Defaults to "Search…".
  • autofocus (:boolean) - Focus the search input on page load. Defaults to false.
  • size (:string) - Control density and type scale. Defaults to "md". Must be one of "xs", "sm", "md", "lg", or "xl".
  • disabled (:boolean) - Disable searching and selection. Defaults to false.
  • errors (:list) - Validation messages; derived from field when used. Defaults to [].
  • search_threshold (:integer) - Characters required before searching. Defaults to 0.
  • no_results_text (:string) - Empty copy; an optional %{query} placeholder is replaced in the browser. Defaults to "No results".
  • on_search (:string) - LiveView search event receiving %{"query" => query}. Defaults to nil.
  • debounce (:integer) - Server-search debounce in milliseconds. Defaults to 200.
  • search_mode (:string) - Static matching mode. Defaults to "contains". Must be one of "contains", "starts-with", or "exact".
  • open_on_focus (:boolean) - Open the suggestions when focused. Defaults to false.
  • animation (:string) - Accepted for Fluxon compatibility; currently a CSS/token-driven no-op. Defaults to "transition duration-150 ease-in-out".
  • animation_enter (:string) - Accepted for Fluxon compatibility; currently a no-op. Defaults to "opacity-100 scale-100".
  • animation_leave (:string) - Accepted for Fluxon compatibility; currently a no-op. Defaults to "opacity-0 scale-95".
  • clearable (:boolean) - Show a button that clears the selection. Defaults to false.
  • class (:any) - Extra classes merged onto the field wrapper. Defaults to nil.
  • Global attributes are accepted. Form and LiveView attributes passed to the hidden value input. Supports all globals plus: ["form", "phx-change", "phx-target"].

Slots

  • inner_prefix - Content inside the control before the input. Accepts attributes:
    • class (:any) - Classes for the affix container.
  • outer_prefix - Content outside the control before it. Accepts attributes:
    • class (:any) - Classes for the affix container.
  • inner_suffix - Content inside the control after the input. Accepts attributes:
    • class (:any) - Classes for the affix container.
  • outer_suffix - Content outside the control after it. Accepts attributes:
    • class (:any) - Classes for the affix container.
  • option - Rich option content; receives {label, value}. Accepts attributes:
    • class (:any) - Classes for each rich option.
  • empty_state - Custom content displayed when no result matches. Accepts attributes:
    • class (:any) - Classes for the empty-state container.
  • header - Content at the top of the suggestions panel. Accepts attributes:
    • class (:any) - Classes for the header container.
  • footer - Content at the bottom of the suggestions panel. Accepts attributes:
    • class (:any) - Classes for the footer container.