Autocomplete自动完成

输入框自动完成功能。

何时使用

需要自动完成时。

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

代码演示

Autocomplete自动完成 - 图1

基本使用

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

  1. import { Component, ViewEncapsulation } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-auto-complete-basic',
  5.   encapsulation: ViewEncapsulation.None,
  6.   template: `
  7.     <div class="example-input">
  8.       <input placeholder="input here" nz-input [(ngModel)]="inputValue" (input)="onInput($event.target?.value)" [nzAutocomplete]="auto" />
  9.       <nz-autocomplete [nzDataSource]="options" nzBackfill #auto></nz-autocomplete>
  10.     </div>
  11.   `
  12. })
  13. export class NzDemoAutoCompleteBasicComponent {
  14.   inputValue: string;
  15.   options: string[] = [];
  17.   onInput(value: string): void {
  18.     this.options = value ? [value, value + value, value + value + value] : [];
  19.   }
  20. }

Autocomplete自动完成 - 图2

自定义选项

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

  1. import { Component, ViewEncapsulation } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-auto-complete-options',
  5.   encapsulation: ViewEncapsulation.None,
  6.   template: `
  7.     <div class="example-input">
  8.       <input placeholder="input here" nz-input [(ngModel)]="inputValue" (input)="onInput($event)" [nzAutocomplete]="auto" />
  9.       <nz-autocomplete #auto>
  10.         <nz-auto-option *ngFor="let option of options" [nzValue]="option">{{ option }}</nz-auto-option>
  11.       </nz-autocomplete>
  12.     </div>
  13.   `
  14. })
  15. export class NzDemoAutoCompleteOptionsComponent {
  16.   inputValue: string;
  17.   options: string[] = [];
  19.   onInput(e: Event): void {
  20.     const value = (e.target as HTMLInputElement).value;
  21.     if (!value || value.indexOf('@') >= 0) {
  22.       this.options = [];
  23.     } else {
  24.       this.options = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
  25.     }
  26.   }
  27. }

Autocomplete自动完成 - 图3

不区分大小写

不区分大小写的 AutoComplete

  1. import { Component, ViewEncapsulation } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-auto-complete-non-case-sensitive',
  5.   encapsulation: ViewEncapsulation.None,
  6.   template: `
  7.     <div class="example-input">
  8.       <input placeholder="try to type \`b\`" nz-input [(ngModel)]="inputValue" (ngModelChange)="onChange($event)" [nzAutocomplete]="auto" />
  9.       <nz-autocomplete [nzDataSource]="filteredOptions" #auto></nz-autocomplete>
  10.     </div>
  11.   `
  12. })
  13. export class NzDemoAutoCompleteNonCaseSensitiveComponent {
  14.   inputValue: string;
  15.   filteredOptions: string[] = [];
  16.   options = ['Burns Bay Road', 'Downing Street', 'Wall Street'];
  18.   constructor() {
  19.     this.filteredOptions = this.options;
  20.   }
  22.   onChange(value: string): void {
  23.     this.filteredOptions = this.options.filter(option => option.toLowerCase().indexOf(value.toLowerCase()) !== -1);
  24.   }
  25. }

Autocomplete自动完成 - 图4

查询模式 - 不确定类目

查询模式: 不确定类目 示例。

  1. import { Component, ViewEncapsulation } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-auto-complete-uncertain-category',
  5.   encapsulation: ViewEncapsulation.None,
  6.   template: `
  7.     <div class="example-input">
  8.       <nz-input-group nzSearch nzSize="large" [nzAddOnAfter]="suffixIconButton">
  9.         <input placeholder="input here" nz-input [(ngModel)]="inputValue" (input)="onChange($event)" [nzAutocomplete]="auto" />
  10.       </nz-input-group>
  11.       <ng-template #suffixIconButton>
  12.         <button nz-button nzType="primary" nzSize="large" nzSearch>
  13.           <i nz-icon nzType="search" nzTheme="outline"></i>
  14.         </button>
  15.       </ng-template>
  16.       <nz-autocomplete #auto>
  17.         <nz-auto-option class="global-search-item" *ngFor="let option of options" [nzValue]="option.category">
  18.           Found {{ option.value }} on
  19.           <a
  20.             class="global-search-item-desc"
  21.             [href]="'https://s.taobao.com/search?q=' + option.value"
  22.             target="_blank"
  23.             rel="noopener noreferrer"
  24.           >
  25.             {{ option.category }}
  26.           </a>
  27.           <span class="global-search-item-count">{{ option.count }} results</span>
  28.         </nz-auto-option>
  29.       </nz-autocomplete>
  30.     </div>
  31.   `,
  32.   styles: [
  33.     `
  34.       .global-search-item {
  35.         display: flex;
  36.       }
  38.       .global-search-item-desc {
  39.         flex: auto;
  40.         text-overflow: ellipsis;
  41.         overflow: hidden;
  42.       }
  44.       .global-search-item-count {
  45.         flex: none;
  46.       }
  47.     `
  48.   ]
  49. })
  50. export class NzDemoAutoCompleteUncertainCategoryComponent {
  51.   inputValue: string;
  52.   options: Array<{ value: string; category: string; count: number }> = [];
  54.   onChange(e: Event): void {
  55.     const value = (e.target as HTMLInputElement).value;
  56.     this.options = new Array(this.getRandomInt(5, 15))
  57.       .join('.')
  58.       .split('.')
  59.       .map((_item, idx) => ({
  60.         value,
  61.         category: `${value}${idx}`,
  62.         count: this.getRandomInt(200, 100)
  63.       }));
  64.   }
  66.   private getRandomInt(max: number, min: number = 0): number {
  67.     return Math.floor(Math.random() * (max - min + 1)) + min;
  68.   }
  69. }

Autocomplete自动完成 - 图5

使用对象类型选项

当 nzValue 和 ngModel 类型为 object 时使用 compareWith(SelectControlValueAccessor).

  1. import { Component, ViewEncapsulation } from '@angular/core';
  3. interface Option {
  4.   label: string;
  5.   value: string;
  6.   age: number;
  7. }
  9. @Component({
  10.   selector: 'nz-demo-auto-complete-object-value',
  11.   encapsulation: ViewEncapsulation.None,
  12.   template: `
  13.     <div class="example-input">
  14.       <input placeholder="input here" nz-input [(ngModel)]="inputValue" [nzAutocomplete]="auto" />
  15.       <nz-autocomplete #auto [compareWith]="compareFun">
  16.         <nz-auto-option *ngFor="let option of options" [nzValue]="option" [nzLabel]="option.label">
  17.           {{ option.label }}
  18.         </nz-auto-option>
  19.       </nz-autocomplete>
  20.     </div>
  21.   `
  22. })
  23. export class NzDemoAutoCompleteObjectValueComponent {
  24.   inputValue: Option = { label: 'Lucy', value: 'lucy', age: 20 };
  25.   options: Option[] = [
  26.     { label: 'Lucy', value: 'lucy', age: 20 },
  27.     { label: 'Jack', value: 'jack', age: 22 }
  28.   ];
  30.   compareFun = (o1: Option | string, o2: Option) => {
  31.     if (o1) {
  32.       return typeof o1 === 'string' ? o1 === o2.label : o1.value === o2.value;
  33.     } else {
  34.       return false;
  35.     }
  36.   };
  37. }

Autocomplete自动完成 - 图6

自定义输入组件

自定义输入组件。

  1. import { Component, ViewEncapsulation } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-auto-complete-custom',
  5.   encapsulation: ViewEncapsulation.None,
  6.   template: `
  7.     <div class="example-input">
  8.       <textarea
  9.         placeholder="input here"
  10.         nz-input
  11.         row="4"
  12.         [(ngModel)]="inputValue"
  13.         (input)="onInput($event.target?.value)"
  14.         [nzAutocomplete]="auto"
  15.       ></textarea>
  16.       <nz-autocomplete #auto>
  17.         <nz-auto-option *ngFor="let option of options" [nzValue]="option">{{ option }}</nz-auto-option>
  18.       </nz-autocomplete>
  19.     </div>
  20.   `
  21. })
  22. export class NzDemoAutoCompleteCustomComponent {
  23.   inputValue: string;
  24.   options: string[] = [];
  26.   onInput(value: string): void {
  27.     this.options = value ? [value, value + value, value + value + value] : [];
  28.   }
  29. }

Autocomplete自动完成 - 图7

查询模式 - 确定类目

查询模式: 确定类目 示例。

  1. import { Component, OnInit, ViewEncapsulation } from '@angular/core';
  3. export interface AutocompleteOptionGroups {
  4.   title: string;
  5.   count?: number;
  6.   children?: AutocompleteOptionGroups[];
  7. }
  9. @Component({
  10.   selector: 'nz-demo-auto-complete-certain-category',
  11.   encapsulation: ViewEncapsulation.None,
  12.   template: `
  13.     <div class="example-input">
  14.       <nz-input-group nzSize="large" [nzSuffix]="suffixIcon">
  15.         <input placeholder="input here" nz-input [(ngModel)]="inputValue" (ngModelChange)="onChange($event)" [nzAutocomplete]="auto" />
  16.       </nz-input-group>
  17.       <ng-template #suffixIcon>
  18.         <i nz-icon nzType="search"></i>
  19.       </ng-template>
  20.       <nz-autocomplete #auto>
  21.         <nz-auto-optgroup *ngFor="let group of optionGroups" [nzLabel]="groupTitle">
  22.           <ng-template #groupTitle>
  23.             <span
  24.               >{{ group.title }}
  25.               <a class="more-link" href="https://www.google.com/search?q=ng+zorro" target="_blank">更多</a>
  26.             </span>
  27.           </ng-template>
  28.           <nz-auto-option *ngFor="let option of group.children" [nzLabel]="option.title" [nzValue]="option.title">
  29.             {{ option.title }}
  30.             <span class="certain-search-item-count">{{ option.count }} 人 关注</span>
  31.           </nz-auto-option>
  32.         </nz-auto-optgroup>
  33.       </nz-autocomplete>
  34.     </div>
  35.   `,
  36.   styles: [
  37.     `
  38.       .certain-search-item-count {
  39.         position: absolute;
  40.         color: #999;
  41.         right: 16px;
  42.       }
  44.       .more-link {
  45.         float: right;
  46.       }
  47.     `
  48.   ]
  49. })
  50. export class NzDemoAutoCompleteCertainCategoryComponent implements OnInit {
  51.   inputValue: string;
  52.   optionGroups: AutocompleteOptionGroups[];
  54.   constructor() {}
  56.   onChange(value: string): void {
  57.     console.log(value);
  58.   }
  60.   ngOnInit(): void {
  61.     setTimeout(() => {
  62.       this.optionGroups = [
  63.         {
  64.           title: '话题',
  65.           children: [
  66.             {
  67.               title: 'AntDesign',
  68.               count: 10000
  69.             },
  70.             {
  71.               title: 'AntDesign UI',
  72.               count: 10600
  73.             }
  74.           ]
  75.         },
  76.         {
  77.           title: '问题',
  78.           children: [
  79.             {
  80.               title: 'AntDesign UI 有多好',
  81.               count: 60100
  82.             },
  83.             {
  84.               title: 'AntDesign 是啥',
  85.               count: 30010
  86.             }
  87.           ]
  88.         },
  89.         {
  90.           title: '文章',
  91.           children: [
  92.             {
  93.               title: 'AntDesign 是一个设计语言',
  94.               count: 100000
  95.             }
  96.           ]
  97.         }
  98.       ];
  99.     }, 1000);
  100.   }
  101. }

API

  1. <input nz-input [(ngModel)]="value" [nzAutocomplete]="auto">
  2. <nz-autocomplete [nzDataSource]="['12345', '23456', '34567']" #auto></nz-autocomplete>
  1. <input nz-input [(ngModel)]="value" [nzAutocomplete]="auto">
  2. <nz-autocomplete #auto>
  3.   <nz-auto-option [nzValue]="'12345'">12345</nz-auto-option>
  4.   <nz-auto-option [nzValue]="'23456'">23456</nz-auto-option>
  5.   <nz-auto-option [nzValue]="'34567'">34567</nz-auto-option>
  6. </nz-autocomplete>

[nzAutocomplete]directive

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

nz-autocompletecomponent

属性说明类型默认值
[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-optioncomponent

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