AutoComplete自动完成

输入框自动完成功能。
使用

何时使用#

需要自动完成时。

代码演示

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

      加载中
    

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

      加载中
    

不区分大小写的 AutoComplete

      加载中
    
      加载中
    

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

      加载中
    

自定义输入组件。

      加载中
    
      加载中
    


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

      加载中
    

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