AutoComplete

AutoComplete function of input field.

Import

Source

components/auto-complete

Docs

Edit this page

When To Use#

When there is a need for autocomplete functionality.

Examples#

Basic Usage

Basic Usage, set nzDataSource of nz-autocomplete with dataSource property.

      Loading...

Customized

You could pass nz-auto-option as Content of nz-autocomplete, instead of using nzDataSource`.

      Loading...

Non-case-sensitive AutoComplete

A non-case-sensitive AutoComplete

      Loading...

Lookup-Patterns - Uncertain Category

Demonstration of Lookup Patterns: Uncertain Category.

      Loading...

Variants

Variant is supported out of the box by using nz-input and setting nzVariant to outlined, underlined, filled and borderless

      Loading...

Use option with object type

Use compareWith(SelectControlValueAccessor) when the nzValue and ngModel type is object.

      Loading...

Customize Input Component

      Loading...

Lookup-Patterns - Certain Category

Demonstration of Lookup Patterns: Certain Category.

      Loading...

Status

Add status to AutoComplete with nzStatus, which could be error or warning.

      Loading...

API#

<input nz-input [(ngModel)]="value" [nzAutocomplete]="auto" />
<nz-autocomplete [nzDataSource]="['12345', '23456', '34567']" #auto></nz-autocomplete>

<input nz-input [(ngModel)]="value" [nzAutocomplete]="auto" />
<nz-autocomplete #auto>
  <nz-auto-option [nzValue]="'12345'">12345</nz-auto-option>
  <nz-auto-option [nzValue]="'23456'">23456</nz-auto-option>
  <nz-auto-option [nzValue]="'34567'">34567</nz-auto-option>
</nz-autocomplete>

[nzAutocomplete]directive#

Property	Description	Type	Default
`[nzAutocomplete]`	used to bind `nzAutocomplete` components	`NzAutocompleteComponent`	-

nz-autocompletecomponent#

Property	Description	Type	Default
`[nzBackfill]`	backfill selected item the input when using keyboard	`boolean`	`false`
`[nzDataSource]`	Data source for autocomplete	`AutocompleteDataSource`	-
`[nzDefaultActiveFirstOption]`	Whether active first option by default	`boolean`	`true`
`[nzWidth]`	Custom width, unit px	`number`	trigger element width
`[nzOverlayClassName]`	Class name of the dropdown root element	`string`	-
`[nzOverlayStyle]`	Style of the dropdown root element	`object`	-
`[compareWith]`	Same as SelectControlValueAccessor	`(o1: any, o2: any) => boolean`	`(o1: any, o2: any) => o1===o2`

nz-auto-optioncomponent#

Property	Description	Type	Default
`[nzValue]`	bind ngModel of the trigger element	`any`	-
`[nzLabel]`	display value of the trigger element	`string`	-
`[nzDisabled]`	disabled option	`boolean`	`false`

FAQ#

Q: The overlay layer element does not follow the scroll position when scrolling#

By default, the overlay layer element uses body as the scroll container. If using another scroll container, add the CdkScrollable directive to the custom scroll container element. Note: You need to import the CdkScrollable directive or ScrollingModule module from @angular/cdk/scrolling.