A Material Design autocomplete — a text field with a filtered dropdown of options.
Unlike every other PhoenixPaper component, this one needs interactive
state (the current query, which options are filtered, whether the
dropdown is open), so it's a Phoenix.LiveComponent, not a stateless
function component, and it only works inside a LiveView (not a plain,
non-LiveView controller-rendered page). Use it like any other live
component:
<.live_component
module={PhoenixPaper.Autocomplete}
id="country"
name="country"
label="Country"
options={["Canada", "Mexico", "United States"]}
/>Filtering runs entirely server-side via phx-change/phx-debounce on the
text input — no client JS beyond what LiveView already ships.
Every phx-* binding in the template needs its own phx-target={@myself}
— it isn't inherited from an ancestor element the way phx-target on a
<form> might suggest. A phx-focus="open" on the <input> without one
routes that event to the parent LiveView instead of this component; if the
parent has no matching handle_event/3 clause, the whole LiveView crashes
and remounts, which looks like nothing happened at all — the dropdown
never had a chance to render before the reset.