Combobox

The server answers each query with the matching countries.

Each preview is its own Live page in a frame, because this site is a Vue 3.5 app built on the Pulsar starter kit. An open list or popover stays inside its frame; in your application it opens over the page.

Installation

suprnova live:add combobox

Usage

{% import "suprnova-ui/combobox/combobox.html" as combobox %}
{% call combobox::combobox("country", "Country", countries, query=country, placeholder="Type a country") %}{% endcall %}

Examples

Keyboard and accessibility

suprnova.combobox - the accessible combobox pattern over a native input and list (FORM-008). The input carries the model and, before the script loads, a datalist gives the same options natively, so the control works with the helper absent. sn-combobox (combobox.js) takes over the listbox: it sets aria-expanded, moves aria-activedescendant with the arrow keys, selects on Enter or click, and closes on Escape. The input renders the island's query as its value (FORM-009).

By default the options are the server's answer to the query (remote): the listbox carries data-sn-remote and data-sn-query, the query the server rendered it for. The element shows every option while that query is the input's current text, whatever the server matched (FORM-012), and keeps a listbox rendered for older text hidden, so a stale result never replaces results for a newer query (stale suppression, FORM-008, in SuprnovaCombobox.acceptsResults). The component re-renders the options for the query on every render, a model update included. With remote=false the options are a fixed list and the element filters them by the typed text.

The wrapper is keyed with live:preserve.self, so its upgrade marker survives a morph; the script re-applies its input changes after a re-render. Classification: varies with the island.

API reference