Autocomplete自动完成

输入框自动完成功能。

何时使用

需要自动完成时。

代码演示

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
  9.         placeholder="input here"
  10.         nz-input
  11.         [(ngModel)]="inputValue"
  12.         (input)="onInput($event.target?.value)"
  13.         [nzAutocomplete]="auto"
  14.       />
  15.       <nz-autocomplete nzBackfill #auto>
  16.         <nz-auto-option *ngFor="let option of options" [nzValue]="option">
  17.           {{ option }}
  18.         </nz-auto-option>
  19.       </nz-autocomplete>
  20.     </div>
  21.   `
  22. })
  23. export class NzDemoAutoCompleteBasicComponent {
  24.   inputValue: string;
  25.   options: string[] = [];
  27.   onInput(value: string): void {
  28.     this.options = value ? [value, value + value, value + value + value] : [];
  29.   }
  30. }

Autocomplete自动完成 - 图2

自定义输入组件

自定义输入组件。

  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自动完成 - 图3

查询模式 - 确定类目

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

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

Autocomplete自动完成 - 图4

自定义选项

也可以直接传 nz-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
  9.         placeholder="input here"
  10.         nz-input
  11.         [(ngModel)]="inputValue"
  12.         (ngModelChange)="onChange($event)"
  13.         [nzAutocomplete]="auto"
  14.       />
  15.       <nz-autocomplete #auto>
  16.         <nz-auto-option *ngFor="let option of options" [nzValue]="option">{{ option }}</nz-auto-option>
  17.       </nz-autocomplete>
  18.     </div>
  19.   `
  20. })
  21. export class NzDemoAutoCompleteOptionsComponent {
  22.   inputValue: string;
  23.   options: string[] = [];
  25.   onChange(value: string): void {
  26.     if (!value || value.indexOf('@') >= 0) {
  27.       this.options = [];
  28.     } else {
  29.       this.options = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
  30.     }
  31.   }
  32. }

Autocomplete自动完成 - 图5

不区分大小写

不区分大小写的 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
  9.         placeholder="try to type \`b\`"
  10.         nz-input
  11.         [(ngModel)]="inputValue"
  12.         (input)="onInput($event.target?.value)"
  13.         [nzAutocomplete]="auto"
  14.       />
  15.       <nz-autocomplete [nzDataSource]="filteredOptions" #auto> </nz-autocomplete>
  16.     </div>
  17.   `
  18. })
  19. export class NzDemoAutoCompleteNonCaseSensitiveComponent {
  20.   inputValue: string;
  21.   filteredOptions: string[] = [];
  22.   options = ['Burns Bay Road', 'Downing Street', 'Wall Street'];
  24.   constructor() {
  25.     this.filteredOptions = this.options;
  26.   }
  28.   onInput(value: string): void {
  29.     this.filteredOptions = this.options.filter(option => option.toLowerCase().indexOf(value.toLowerCase()) === 0);
  30.   }
  31. }

Autocomplete自动完成 - 图6

查询模式 - 不确定类目

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

  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
  10.           placeholder="input here"
  11.           nz-input
  12.           [(ngModel)]="inputValue"
  13.           (ngModelChange)="onChange($event)"
  14.           [nzAutocomplete]="auto"
  15.         />
  16.       </nz-input-group>
  17.       <ng-template #suffixIconButton>
  18.         <button nz-button nzType="primary" nzSize="large" nzSearch>
  19.           <i nz-icon type="search" theme="outline"></i>
  20.         </button>
  21.       </ng-template>
  22.       <nz-autocomplete #auto>
  23.         <nz-auto-option *ngFor="let option of options" [nzValue]="option.category">
  24.           {{ option.value }} 在
  25.           <a [href]="'https://s.taobao.com/search?q=' + option.query" target="_blank" rel="noopener noreferrer">
  26.             {{ option.category }}
  27.           </a>
  28.           区块中
  29.           <span class="global-search-item-count">约 {{ option.count }} 个结果</span>
  30.         </nz-auto-option>
  31.       </nz-autocomplete>
  32.     </div>
  33.   `,
  34.   styles: [
  35.     `
  36.       .global-search-item-count {
  37.         position: absolute;
  38.         right: 16px;
  39.       }
  40.     `
  41.   ]
  42. })
  43. export class NzDemoAutoCompleteUncertainCategoryComponent {
  44.   inputValue: string;
  45.   options: Array<{ value: string; category: string; count: number }> = [];
  47.   onChange(value: string): void {
  48.     this.options = new Array(this.getRandomInt(15, 5))
  49.       .join('.')
  50.       .split('.')
  51.       .map((_item, idx) => ({
  52.         value,
  53.         category: `${value}${idx}`,
  54.         count: this.getRandomInt(200, 100)
  55.       }));
  56.   }
  58.   private getRandomInt(max: number, min: number = 0): number {
  59.     return Math.floor(Math.random() * (max - min + 1)) + min;
  60.   }
  61. }

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>

单独引入此组件

想要了解更多关于单独引入组件的内容，可以在快速上手页面进行查看。

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

[nzAutocomplete]directive

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

nz-autocompletecomponent

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

nz-auto-optioncomponent

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