Forms

Suggest

@xui/suggest

A typeahead autocomplete: the text input itself is the target. Typing filters a popover list; choosing an item fills the input. Arrow/Enter/Escape keyboard. [(value)] two-way binding.

Install

pnpm add @xui/suggest

Add the barrel to a standalone component's imports:

import { XuiSuggestImports } from '@xui/suggest';

@Component({
  imports: [XuiSuggestImports],
  // …
})

Examples

Default

Loading preview…

<div class="w-64">
  <xui-suggest [items]="cities" [(value)]="selected" placeholder="Search a city…" />
  <p class="text-foreground-muted mt-3 text-sm">Selected: {{ selected ?? '—' }}</p>
</div>

API

XuiSuggest

component

xui-suggest

A typeahead autocomplete: the text input itself is the target. Typing filters a popover list; choosing an item fills the input with its text. Unlike xui-select, there is no separate trigger. [(value)] two-way binding.

Inputs

Name

Type

Default

class

ClassValueExtra classes, merged into the component's own rather than replacing them.

''

items

readonly T[]The options to search over.

[]

itemText

(item: T) => stringHow an item is labelled, in both the list and the field once chosen. Also what the default filter matches against.

(item: T) => (item == null ? '' : String(item))

itemPredicate

(query: string, item: T) => booleanCustom filter for one item against the query. Defaults to a case-insensitive substring match on itemText.

—

itemDisabled

(item: T) => booleanWhich items cannot be chosen. They stay in the list, greyed out.

() => false

disabled

booleanBlock interaction and dim the field.

false

placeholder

stringText shown in the empty field.

'Search…'

noResultsText

stringShown in place of the list when the query matches nothing.

'No results.'

value

two-way

T | nullThe chosen item. Two-way bindable with [(value)], or via formControl/ngModel.

null

Source

libs/ui/suggest/xui