Autocomplete

Autocomplete function of input field.

When To Use#

When there is a need for autocomplete functionality.

import { NzAutocompleteModule } from 'ng-zorro-antd/auto-complete';

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...

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]directivestandalone#

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

nz-autocompletecomponentstandalone#

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-optioncomponentstandalone#

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`