DevactionUI.Autocomplete (devaction_ui v0.1.0)

Copy Markdown View Source

Suggestions while you type, in groups (lessons, pull requests, tasks), with the part that matched in bold and an optional last row that asks the AI. The server owns the search: the field sends event (debounced) with the text, and the caller answers with groups; this component draws the field and the list and moves the active row with ↑ ↓, opens it with Enter (the row is a link) and runs the AI row with ⌘ + Enter (or Ctrl + Enter). Esc closes the list, typing opens it again.

A group is %{label: "Lessons", items: [%{id: ..., label: ..., to: path, hint: "30", tone: :warn}]}; hint is a small mono badge, tone colors it. highlight/2 splits a label around the query, ignoring case and accents, for the bold part.

Summary

Functions

autocomplete(assigns)
highlight(label, query)

Splits label around the first place query appears, ignoring case and accents: highlight("Ecto.Multi", "ecto") is [match: "Ecto", text: ".Multi"]. No match, or a blank query, is the whole label as text.

Functions

autocomplete(assigns)

Attributes

  • id (:string) (required)
  • name (:string) - Defaults to "q".
  • value (:string) - Defaults to "".
  • label (:string) (required) - what is being searched, for assistive technology.
  • placeholder (:string) - Defaults to nil.
  • event (:string) (required) - the event the field sends with the text, debounced.
  • groups (:list) - Defaults to [].
  • empty (:string) (required) - shown when a query finds nothing.
  • ask_label (:string) - the text of the AI row, e.g. Ask the AI about "ecto"; no row when nil. Defaults to nil.
  • ask_event (:string) - the event the AI row sends with the text. Defaults to nil.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

highlight(label, query)

@spec highlight(String.t(), String.t()) :: [{:text | :match, String.t()}]

Splits label around the first place query appears, ignoring case and accents: highlight("Ecto.Multi", "ecto") is [match: "Ecto", text: ".Multi"]. No match, or a blank query, is the whole label as text.