AutoComplete

Basic Usage

The simplest usage of AutoComplete with static options.

Selected: None

<prism-autocomplete [(value)]="basicValue" [options]="options" />

Custom Filter

Using a custom filter function (e.g., 'Starts with' instead of default 'Contains').

<prism-autocomplete 
  [(value)]="customValue" 
  [options]="options" 
  [filterFn]="customFilter" 
  placeholder="Starts with..." />

Async Search

Handle asynchronous data loading with the searchChange event.

<prism-autocomplete 
  [(value)]="asyncValue" 
  [options]="options" 
  [isLoading]="isLoading()"
  (searchChange)="onSearchChange($event)" />

PrismAutoComplete APINameTypeDefaultDescription
optionsinput<string[]>[]List of suggestions.
valuemodel<string>''The current value of the input.
placeholderinput<string>'Type to search...'Input placeholder.
disabledinput<boolean>falseWhether the input is disabled.
allowFreeTextinput<boolean>trueWhether to allow values not in the options list.
maxResultsinput<number>10Maximum number of results to display.
isLoadinginput<boolean>falseDisplay a loading spinner.
filterFninput<((q: string, opts: string[]) => string[]) | null>nullCustom filter logic.
selectedoutput<string>-Emitted when an option is selected.
searchChangeoutput<string>-Emitted on every keystroke.

Name	Type	Default	Description
`options`	`input<string[]>`	`[]`	List of suggestions.
`value`	`model<string>`	`''`	The current value of the input.
`placeholder`	`input<string>`	`'Type to search...'`	Input placeholder.
`disabled`	`input<boolean>`	`false`	Whether the input is disabled.
`allowFreeText`	`input<boolean>`	`true`	Whether to allow values not in the options list.
`maxResults`	`input<number>`	`10`	Maximum number of results to display.
`isLoading`	`input<boolean>`	`false`	Display a loading spinner.
`filterFn`	`input<((q: string, opts: string[]) => string[]) \| null>`	`null`	Custom filter logic.
`selected`	`output<string>`	`-`	Emitted when an option is selected.
`searchChange`	`output<string>`	`-`	Emitted on every keystroke.