Autocomplete

The Autocomplete component is a text input connected to a panel of suggested options. Use it when users need to type, filter a list, and select one matching value. It is best for searchable choices where a normal Select would feel too static or too long.

Use it for:

Searchable selection: Let users find an item by typing part of its label.
Filtered options: Connect it to reactive forms and filter options as the input value changes.
Object values: Store an object as the value and show readable text with displayWith.
Grouped suggestions: Organize options with option groups when the list has clear sections.

Build Autocomplete with an ngs-form-field, an input using ngsInput and ngsAutocomplete, an ngs-autocomplete panel, and ngs-option items. Do not use it for simple free text, small static lists, command menus, or multi-value tags.

The NgStarter Angular Autocomplete component lets you let users search and choose from suggestions while typing. Use for large option lists where a select would be too slow or crowded. It includes examples for Simple autocomplete, Custom Filter, Separate control and display values, and Automatically highlighting the first option.

Simple autocomplete

Use a simple autocomplete when the user types into an input and chooses one matching option from a filtered list.

Number

Custom Filter

Filter options from the input value when the list is larger than a normal select or should narrow as the user types.

Separate control and display values

Use displayWith when the selected value is an object but the input should show a readable label.

Assignee

Automatically highlighting the first option

Enable the first option automatically when keyboard users should be able to confirm the top suggestion quickly.

Number

Autocomplete with option groups

Use option groups when suggestions belong to clear categories and grouping makes scanning easier.