Autocomplete自动完成

    需要自动完成时。

    基本使用

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

    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)" [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(event: Event): void {
    18.     const value = (event.target as HTMLInputElement).value;
    19.     this.options = value ? [value, value + value, value + value + value] : [];
    20.   }
    21. }

    Autocomplete自动完成 - 图4

    自定义选项

    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

    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 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.         display: flex;
    35.       }
    37.       .global-search-item-desc {
    38.         flex: auto;
    39.         text-overflow: ellipsis;
    40.         overflow: hidden;
    41.       }
    43.       .global-search-item-count {
    44.         flex: none;
    46.     `
    47.   ]
    48. })
    49. export class NzDemoAutoCompleteUncertainCategoryComponent {
    50.   inputValue?: string;
    51.   options: Array<{ value: string; category: string; count: number }> = [];
    53.   onChange(e: Event): void {
    54.     const value = (e.target as HTMLInputElement).value;
    55.     this.options = new Array(this.getRandomInt(5, 15))
    56.       .join('.')
    57.       .split('.')
    58.       .map((_item, idx) => ({
    59.         value,
    60.         category: `${value}${idx}`,
    61.         count: this.getRandomInt(200, 100)
    62.       }));
    63.   }
    65.   private getRandomInt(max: number, min: number = 0): number {
    66.     return Math.floor(Math.random() * (max - min + 1)) + min;
    67.   }
    68. }

    使用对象类型选项

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

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

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

    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.       <ng-template #suffixIcon>
    17.         <i nz-icon nzType="search"></i>
    18.       </ng-template>
    19.       <nz-autocomplete #auto>
    20.         <nz-auto-optgroup *ngFor="let group of optionGroups" [nzLabel]="groupTitle">
    21.           <ng-template #groupTitle>
    22.             <span
    23.               >{{ group.title }}
    24.               <a class="more-link" href="https://www.google.com/search?q=ng+zorro" target="_blank">更多</a>
    25.             </span>
    26.           </ng-template>
    27.           <nz-auto-option *ngFor="let option of group.children" [nzLabel]="option.title" [nzValue]="option.title">
    28.             {{ option.title }}
    29.             <span class="certain-search-item-count">{{ option.count }} 人 关注</span>
    30.           </nz-auto-option>
    31.         </nz-auto-optgroup>
    33.     </div>
    34.   `,
    35.   styles: [
    36.     `
    37.       .certain-search-item-count {
    38.         position: absolute;
    39.         color: #999;
    40.         right: 16px;
    41.       }
    43.       .more-link {
    44.         float: right;
    45.       }
    46.     `
    47.   ]
    48. })
    49. export class NzDemoAutoCompleteCertainCategoryComponent implements OnInit {
    50.   inputValue?: string;
    51.   optionGroups: AutocompleteOptionGroups[] = [];
    53.   constructor() {}
    55.   onChange(value: string): 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. }
    1. <input nz-input [(ngModel)]="value" [nzAutocomplete]="auto">
    2. <nz-autocomplete [nzDataSource]="['12345', '23456', '34567']" #auto></nz-autocomplete>