Autocomplete自动完成

输入框自动完成功能。

何时使用

需要自动完成时。

单独引入此组件

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

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

代码演示

Autocomplete自动完成 - 图1

基本使用

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

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

Autocomplete自动完成 - 图2

自定义输入组件

自定义输入组件。

  1. import { Component, ViewEncapsulation } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-auto-complete-custom',
  4. encapsulation: ViewEncapsulation.None,
  5. template: `
  6. <div class="example-input">
  7. <textarea
  8. placeholder="input here"
  9. nz-input
  10. row="4"
  11. [(ngModel)]="inputValue"
  12. (input)="onInput($event.target?.value)"
  13. [nzAutocomplete]="auto"
  14. ></textarea>
  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 NzDemoAutoCompleteCustomComponent {
  22. inputValue: string;
  23. options: string[] = [];
  24. onInput(value: string): void {
  25. this.options = value ? [value, value + value, value + value + value] : [];
  26. }
  27. }

Autocomplete自动完成 - 图3

查询模式 - 确定类目

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

  1. import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-auto-complete-certain-category',
  4. encapsulation: ViewEncapsulation.None,
  5. changeDetection: ChangeDetectionStrategy.OnPush,
  6. template: `
  7. <div class="example-input">
  8. <nz-input-group nzSize="large" [nzSuffix]="suffixIcon">
  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 #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">
  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. }
  43. .more-link {
  44. float: right;
  45. }
  46. `
  47. ]
  48. })
  49. export class NzDemoAutoCompleteCertainCategoryComponent implements OnInit {
  50. inputValue: string;
  51. optionGroups: any[];
  52. onChange(value: any): void {
  53. console.log(value);
  54. }
  55. ngOnInit(): void {
  56. setTimeout(() => {
  57. this.optionGroups = [
  58. {
  59. title: '话题',
  60. children: [
  61. {
  62. title: 'AntDesign',
  63. count: 10000
  64. },
  65. {
  66. title: 'AntDesign UI',
  67. count: 10600
  68. }
  69. ]
  70. },
  71. {
  72. title: '问题',
  73. children: [
  74. {
  75. title: 'AntDesign UI 有多好',
  76. count: 60100
  77. },
  78. {
  79. title: 'AntDesign 是啥',
  80. count: 30010
  81. }
  82. ]
  83. },
  84. {
  85. title: '文章',
  86. children: [
  87. {
  88. title: 'AntDesign 是一个设计语言',
  89. count: 100000
  90. }
  91. ]
  92. }
  93. ];
  94. }, 1000);
  95. }
  96. }

Autocomplete自动完成 - 图4

自定义选项

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

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

Autocomplete自动完成 - 图5

不区分大小写

不区分大小写的 AutoComplete

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

Autocomplete自动完成 - 图6

查询模式 - 不确定类目

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

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

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-

nz-auto-optioncomponent

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