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, set nzDataSource of nz-autocomplete with dataSource property.

expand codeexpand code
      Loading...
    

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

expand codeexpand code
      Loading...
    

A non-case-sensitive AutoComplete

expand codeexpand code
      Loading...
    
expand codeexpand code
      Loading...
    

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

expand codeexpand code
      Loading...
    

Customize Input Component

expand codeexpand code
      Loading...
    
expand codeexpand code
      Loading...
    

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

expand codeexpand code
      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]#

PropertyDescriptionTypeDefault
[nzAutocomplete]used to bind nzAutocomplete componentsNzAutocompleteComponent-

nz-autocomplete#

PropertyDescriptionTypeDefault
[nzBackfill]backfill selected item the input when using keyboardbooleanfalse
[nzDataSource]Data source for autocompleteAutocompleteDataSource-
[nzDefaultActiveFirstOption]Whether active first option by defaultbooleantrue
[nzWidth]Custom width, unit pxnumbertrigger element width
[nzOverlayClassName]Class name of the dropdown root elementstring-
[nzOverlayStyle]Style of the dropdown root elementobject-
[compareWith]Same as SelectControlValueAccessor(o1: any, o2: any) => boolean(o1: any, o2: any) => o1===o2

nz-auto-option#

PropertyDescriptionTypeDefault
[nzValue]bind ngModel of the trigger elementany-
[nzLabel]display value of the trigger elementstring-
[nzDisabled]disabled optionbooleanfalse