Quick input

A search field over a list of results, the kind command search shows. The owner filters and orders the items for the query; the component shows them, keeps one active and reports the one chosen. The arrow keys, Home, End, Page Up and Page Down move the active result, Enter chooses it, a click chooses the result clicked, and Escape dismisses the search. Once the keys move or filter the results, the active result shows its title and detail in a tooltip while they are cut short, until the field loses focus; the first Escape hides that tooltip instead, until the next move or filter. The owner can give a filters row under the field, each element it marks nolQuickInputFilters, and a footer under the results, each element it marks nolQuickInputFooter; each row shows only when given.

Examples

Loading…

States

Loading…

API

Selector nol-quick-input

Import from @noldova/ui.components.angular

Inputs

Name	Type	Default	Description
`items`	`readonly QuickInputItem[]`	Required	The results in the order shown. A result the person made active with the keys stays active through a change while it is still listed, until the query changes; otherwise a change makes the first one active. A result with a section starts a group with that heading, a gap after the group before it.
`label`	`string`	Required	The field's placeholder and the accessible name of the field and the list.
`icon`	`string \| null`	`null`	The name of a glyph shown inside the field before the query, muted at the `quick-input-glyph` size, such as `search` for a search palette, one field padding inside the field, with the query one field padding after it. No glyph when null, the default.
`emptyText`	`string`	`String.empty`	The text shown in the results' place while there are no items, such as a hint before the person types, a "Nothing found." or a failure. It is muted in the panel's text role, starts at the query's start edge, and is announced in place of the result count; while it shows, the field reports its list closed. Nothing is shown when empty, the default.
`isEmptyTextAlert`	`boolean`	`false`	Whether the empty text is announced as an alert, for a failure, rather than politely; false when not bound.
`query`	`string`	`String.empty`	The text in the field, which the person's typing sets; bind it two ways with `[(query)]` to filter the items. Empty when not bound. Two-way: bind it as `[(query)]`.
`isFocusing`	`boolean`	`true`	Whether the field takes focus after the component first renders; true when not bound.

Outputs

Name	Type	Description
`chosen`	`QuickInputItem`	Emits the result the person chose with Enter or a click. When Enter comes right after typing, it waits until the items for the new query have rendered and chooses the active one of those. Nothing is emitted while there are no results.
`dismissed`	`void`	Emits when the person presses Escape; the owner closes the search.
`tabKey`	`KeyboardEvent`	Emits Tab and Shift+Tab pressed in the field, with the key's event, such as to move to the next filter. The owner that calls `preventDefault` on the event keeps the focus in the field; otherwise the focus moves on.

Accessibility

Key	Action
`Arrow Down`	Makes the next result the active one.
`Arrow Up`	Makes the previous result the active one.
`Home`	Makes the first result the active one; with Shift, selects the query to its start instead.
`End`	Makes the last result the active one; with Shift, selects the query to its end instead.
`Page Down`	Moves the active result down by a page of results.
`Page Up`	Moves the active result up by a page of results.
`Enter`	Chooses the active result.
`Escape`	Hides the active result's tooltip, if one shows; else asks the owner to close the search.
`Tab`	Goes to the owner as tabKey, such as to move to the next filter; unless the owner keeps it, the focus moves on.

The field has the combobox role over a listbox, both named by label; the active result is followed with aria-activedescendant while the focus stays in the field, and is marked aria-selected.

Results with a section sit in an element with the group role, named by the section's heading, which also describes the group's first result.

The number of results is announced as a status; an empty text is announced in its place, as an alert when isEmptyTextAlert is true, and the field then reports its list closed.

Specification

Loading…