Autocomplete自动完成

输入框自动完成功能。

何时使用#

需要自动完成时。

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

代码演示

基本使用。通过 nzDataSource 设置自动完成的数据源

expand codeexpand code
      加载中
    

也可以直接传 nz-auto-option 作为 nz-autocomplete 的 Content,而非使用 nzDataSource

expand codeexpand code
      加载中
    

不区分大小写的 AutoComplete

expand codeexpand code
      加载中
    
expand codeexpand code
      加载中
    

nzValuengModel 类型为 object 时使用 compareWith(SelectControlValueAccessor)。

expand codeexpand code
      加载中
    

自定义输入组件。

expand codeexpand code
      加载中
    
expand codeexpand code
      加载中
    

使用 nzStatus 为 AutoComplete 添加状态,可选 error 或者 warning

expand codeexpand code
      加载中
    

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

属性说明类型默认值
[nzAutocomplete]用于绑定 nzAutocomplete 组件NzAutocompleteComponent-

nz-autocomplete#

属性说明类型默认值
[nzBackfill]使用键盘选择选项的时候,会把当前高亮项的值即时回填到输入框中booleanfalse
[nzDataSource]自动完成的数据源AutocompleteDataSource-
[nzDefaultActiveFirstOption]是否默认高亮第一个选项。booleantrue
[nzWidth]自定义宽度单位 pxnumber触发元素宽度
[nzOverlayClassName]下拉根元素的类名称string-
[nzOverlayStyle]下拉根元素的样式object-
[compareWith]SelectControlValueAccessor 相同(o1: any, o2: any) => boolean(o1: any, o2: any) => o1===o2

nz-auto-option#

属性说明类型默认值
[nzValue]绑定到触发元素 ngModel 的值any-
[nzLabel]填入触发元素显示的值string-
[nzDisabled]禁用选项booleanfalse