AutoComplete

AutoComplete function of input field.
Import

When To Use#

When there is a need for autocomplete functionality.

Examples

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

      Loading...
    

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

      Loading...
    

A non-case-sensitive AutoComplete

      Loading...
    
      Loading...
    

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

      Loading...
    

Customize Input Component

      Loading...
    
      Loading...
    


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

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