• Autocomplete自动完成
    • 何时使用
    • 代码演示
    • API
      • 单独引入此组件
      • [nzAutocomplete]directive
      • nz-autocompletecomponent
      • nz-auto-optioncomponent

    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