AutoComplete

Basic

Type a country name to search. This field also accepts your own text.

Dropdown, objects and templates

Open the full list with the dropdown button. This example requires a country from the list and retains the selected object.

Multiple

Select several destinations. Already selected options are excluded; remove a chip to make it available again.

Reactive forms and states

Use a FormControl for validation, reset and disabled state.

Usage and API

import { AvAutoComplete, AvAutoCompleteEvent } from 'avero-ui';
import { FormsModule } from '@angular/forms';

<label for="country">Country</label>
<av-auto-complete inputId="country" [(ngModel)]="selectedCountry"
  [suggestions]="matches" (completeMethod)="search($event)"
  optionLabel="name" dropdown forceSelection showClear />

search(event: AvAutoCompleteEvent) {
  this.matches = this.countries.filter(country =>
    country.name.toLowerCase().includes(event.query.toLowerCase()));
}

<!-- Multiple mode uses an array as its form value -->
<av-auto-complete [(ngModel)]="destinations" multiple
  [suggestions]="matches" (completeMethod)="search($event)"
  optionLabel="name" dataKey="code" ariaLabel="Destinations" />

Import AvAutoComplete with FormsModule for ngModel or ReactiveFormsModule for formControl. Provide suggestions and update them in completeMethod, which emits query and originalEvent. Searches use a 200ms delay and a minimum length of 1 by default; configure delay and minLength as needed. For remote data, cancel outdated requests in your data layer and bind loading while waiting.

optionLabel accepts a property name or function. Selection retains the original object. multiple uses an array; dataKey compares object identities by a unique property. forceSelection clears unmatched text on blur. The dropdown requests either a blank query (default) or the current text with dropdownMode="current". Use #item to customize suggestions.

Other inputs include inputId, ariaLabel, describedBy, placeholder, disabled, readonly, required, invalid, fluid, showClear and emptyMessage. Events onSelect and onUnselect provide value and originalEvent; onClear emits the triggering event. This implementation supports flat suggestion lists.

Label the input with inputId or ariaLabel. Arrow keys navigate suggestions, Enter selects, Escape closes and Tab moves on. Backspace in an empty multiple input removes the last chip. The combobox exposes its expanded state and active option to assistive technology.

Reference: PrimeNG AutoComplete.