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
      加载中
使用对象类型选项

当 nzValue 和 ngModel 类型为 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