feat(module:autocomplete): add autocomplete component (#1093)

* feat(module:autocomplete): add autocomplete component

* refactor(module:autocomplete): refactor autocomplete

* test(module:autocomplete): add test for autocomplete

* doc(module:autocomplete): update demo

* fix(module:autocomplete): fix lint

* feat(module:autocomplete): add toggling animation

* test(module:autocomplete): fix test

* fix(module:autocomplete): dynamic type for nzLabel in opt-group

* doc(module:autocomplete): update demo

* fix(module:autocomplete): active style

* test(module:autocomplete): add test

PROGRESS.md

@@ -52,7 +52,7 @@
 | treeselect | x | x | x | simplejason | - |
 | tree | x | x | x | simplejason | - |
 | cascader | x | x | x | fbchen | - |
-| autocomplete | x | x | x | HsuanXyz | - |
+| autocomplete | √ | 100% | 100% | HsuanXyz | - |
 | mention | x | x | x | HsuanXyz | - |
 
 

components/auto-complete/demo/basic.md

@@ -0,0 +1,14 @@
+---
+order: 0
+title:
+  zh-CN: 基本使用
+  en-US: Basic Usage
+---
+
+## zh-CN
+
+基本使用。通过 `nzDataSource` 设置自动完成的数据源
+
+## en-US
+
+Basic Usage, set `nzDataSource`  of `nz-autocomplete` with dataSource property.

components/auto-complete/demo/basic.ts

@@ -0,0 +1,28 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector     : 'nz-demo-auto-complete-basic',
+  encapsulation: ViewEncapsulation.None,
+  template     : `
+    <div class="example-input">
+      <input placeholder="input here" nz-input [(ngModel)]="inputValue" (input)="onInput($event.target?.value)" [nzAutocomplete]="auto">
+      <nz-autocomplete nzBackfill #auto>
+      <nz-auto-option *ngFor="let option of options" [nzValue]="option">
+      {{option}}
+      </nz-auto-option>
+      </nz-autocomplete>
+    </div>
+`
+})
+export class NzDemoAutoCompleteBasicComponent {
+  inputValue: string;
+  options = [];
+
+  onInput(value: string): void {
+    this.options = value ? [
+      value,
+      value + value,
+      value + value + value
+    ] : [];
+  }
+}

components/auto-complete/demo/certain-category.md

@@ -0,0 +1,14 @@
+---
+order: 4
+title:
+  zh-CN: 查询模式 - 确定类目
+  en-US: Lookup-Patterns - Certain Category
+---
+
+## zh-CN
+
+[查询模式: 确定类目](https://ant.design/docs/spec/reaction#Lookup-Patterns) 示例。
+
+## en-US
+
+Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns).

components/auto-complete/demo/certain-category.ts

@@ -0,0 +1,80 @@
+import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector     : 'nz-demo-auto-complete-certain-category',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template     : `
+    <div class="example-input">
+      <nz-input-group nzSize="large" [nzSuffix]="suffixIcon">
+        <input placeholder="input here" nz-input [(ngModel)]="inputValue" (ngModelChange)="onChange($event)" [nzAutocomplete]="auto"/>
+      </nz-input-group>
+      <ng-template #suffixIcon>
+        <i class="anticon anticon-search"></i>
+      </ng-template>
+      <nz-autocomplete #auto>
+        <nz-auto-optgroup *ngFor="let group of optionGroups" [nzLabel]="groupTitle">
+          <ng-template #groupTitle>
+            <span>{{group.title}}
+              <a class="more-link" href="https://www.google.com/search?q=ng+zorro" target="_blank">更多</a>
+            </span>
+          </ng-template>
+          <nz-auto-option *ngFor="let option of group.children" [nzValue]="option.title">
+            {{option.title}}
+            <span class="certain-search-item-count">{{option.count}} 人  关注</span>
+          </nz-auto-option>
+        </nz-auto-optgroup>
+      </nz-autocomplete>
+    </div>
+`,
+  styles: [`
+  .certain-search-item-count {
+    position: absolute;
+    color: #999;
+    right: 16px;
+  }
+
+  .more-link {
+    float: right;
+  }
+  `]
+})
+export class NzDemoAutoCompleteCertainCategoryComponent implements OnInit {
+  inputValue: string;
+  optionGroups: any[];
+
+  onChange(value: string): void {
+    console.log(value);
+  }
+
+  ngOnInit(): void {
+    setTimeout(() => {
+      this.optionGroups = [{
+        title: '话题',
+        children: [{
+          title: 'AntDesign',
+          count: 10000
+        },         {
+          title: 'AntDesign UI',
+          count: 10600
+        }]
+      },              {
+        title: '问题',
+        children: [{
+          title: 'AntDesign UI 有多好',
+          count: 60100
+        },         {
+          title: 'AntDesign 是啥',
+          count: 30010
+        }]
+      },              {
+        title: '文章',
+        children: [{
+          title: 'AntDesign 是一个设计语言',
+          count: 100000
+        }]
+      }];
+    }, 1000);
+  }
+
+}

components/auto-complete/demo/custom.md

@@ -0,0 +1,14 @@
+---
+order: 2
+title:
+  zh-CN: 自定义输入组件
+  en-US: Customize Input Component
+---
+
+## zh-CN
+
+自定义输入组件。
+
+## en-US
+
+Customize Input Component

components/auto-complete/demo/custom.ts

@@ -0,0 +1,26 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector     : 'nz-demo-auto-complete-custom',
+  encapsulation: ViewEncapsulation.None,
+  template     : `
+    <div class="example-input">
+      <textarea placeholder="input here" nz-input row="4"  [(ngModel)]="inputValue" (input)="onInput($event.target?.value)" [nzAutocomplete]="auto"></textarea>
+      <nz-autocomplete #auto>
+        <nz-auto-option *ngFor="let option of options" [nzValue]="option">{{option}}</nz-auto-option>
+      </nz-autocomplete>
+    </div>
+`
+})
+export class NzDemoAutoCompleteCustomComponent {
+  inputValue: string;
+  options = [];
+
+  onInput(value: string): void {
+    this.options = value ? [
+      value,
+      value + value,
+      value + value + value,
+    ] : [];
+  }
+}

components/auto-complete/demo/non-case-sensitive.md

@@ -0,0 +1,14 @@
+---
+order: 3
+title:
+  zh-CN: 不区分大小写
+  en-US: Non-case-sensitive AutoComplete
+---
+
+## zh-CN
+
+不区分大小写的 AutoComplete
+
+## en-US
+
+A non-case-sensitive AutoComplete

components/auto-complete/demo/non-case-sensitive.ts

@@ -0,0 +1,27 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector     : 'nz-demo-auto-complete-non-case-sensitive',
+  encapsulation: ViewEncapsulation.None,
+  template     : `
+    <div class="example-input">
+      <input placeholder="try to type \`b\`" nz-input [(ngModel)]="inputValue" (input)="onInput($event.target?.value)" [nzAutocomplete]="auto">
+      <nz-autocomplete [nzDataSource]="filteredOptions" #auto>
+      </nz-autocomplete>
+    </div>
+`
+})
+export class NzDemoAutoCompleteNonCaseSensitiveComponent {
+  inputValue: string;
+  filteredOptions = [];
+  options = ['Burns Bay Road', 'Downing Street', 'Wall Street'];
+
+  constructor() {
+    this.filteredOptions = this.options;
+  }
+
+  onInput(value: string): void {
+    this.filteredOptions = this.options
+    .filter(option => option.toLowerCase().indexOf(value.toLowerCase()) === 0);
+  }
+}

components/auto-complete/demo/options.md

@@ -0,0 +1,14 @@
+---
+order: 1
+title:
+  zh-CN: 自定义选项
+  en-US: Customized
+---
+
+## zh-CN
+
+也可以直接传 `nz-option` 作为 `nz-autocomplete` 的 Content，而非使用 `nzDataSource`。
+
+## en-US
+
+You could pass `nz-option` as Content of `nz-autocomplete`, instead of using nzDataSource`.

components/auto-complete/demo/options.ts

@@ -0,0 +1,26 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector     : 'nz-demo-auto-complete-options',
+  encapsulation: ViewEncapsulation.None,
+  template     : `
+    <div class="example-input">
+      <input placeholder="input here" nz-input [(ngModel)]="inputValue" (ngModelChange)="onChange($event)" [nzAutocomplete]="auto">
+      <nz-autocomplete #auto>
+        <nz-auto-option *ngFor="let option of options" [nzValue]="option">{{option}}</nz-auto-option>
+      </nz-autocomplete>
+    </div>
+`
+})
+export class NzDemoAutoCompleteOptionsComponent {
+  inputValue: string;
+  options = [];
+
+  onChange(value: string): void {
+    if (!value || value.indexOf('@') >= 0) {
+      this.options = [];
+    } else {
+      this.options = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
+    }
+  }
+}

components/auto-complete/demo/uncertain-category.md

@@ -0,0 +1,14 @@
+---
+order: 5
+title:
+  zh-CN: 查询模式 - 不确定类目
+  en-US: Lookup-Patterns - Uncertain Category
+---
+
+## zh-CN
+
+[查询模式: 不确定类目](https://ant.design/docs/spec/reaction#Lookup-Patterns) 示例。
+
+## en-US
+
+Demonstration of [Lookup Patterns: Uncertain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns).

components/auto-complete/demo/uncertain-category.ts

@@ -0,0 +1,51 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector     : 'nz-demo-auto-complete-uncertain-category',
+  encapsulation: ViewEncapsulation.None,
+  template     : `
+    <div class="example-input">
+      <nz-input-group nzSearch nzSize="large" [nzSuffix]="suffixIconButton">
+        <input placeholder="input here" nz-input [(ngModel)]="inputValue" (ngModelChange)="onChange($event)" [nzAutocomplete]="auto"/>
+      </nz-input-group>
+      <ng-template #suffixIconButton>
+        <button nz-button nzType="primary" nzSize="large" nzSearch><i class="anticon anticon-search"></i></button>
+      </ng-template>
+      <nz-autocomplete #auto>
+        <nz-auto-option *ngFor="let option of options" [nzValue]="option.category">
+          {{option.value}} 在
+          <a [href]="'https://s.taobao.com/search?q=' + option.query"
+             target="_blank"
+             rel="noopener noreferrer">
+            {{option.category}}
+          </a>
+          区块中
+          <span class="global-search-item-count">约 {{option.count}} 个结果</span>
+        </nz-auto-option>
+      </nz-autocomplete>
+    </div>
+`,
+  styles: [`
+  .global-search-item-count {
+    position: absolute;
+    right: 16px;
+  }
+  `]
+})
+export class NzDemoAutoCompleteUncertainCategoryComponent {
+  inputValue: string;
+  options = [];
+
+  onChange(value: string): void {
+    this.options = new Array(this.getRandomInt(15, 5)).join('.').split('.')
+    .map((item, idx) => ({
+      value,
+      category: `${value}${idx}`,
+      count: this.getRandomInt(200, 100),
+    }));
+  }
+
+  private getRandomInt(max: number, min: number = 0): number {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  }
+}

components/auto-complete/doc/index.en-US.md

@@ -0,0 +1,43 @@
+---
+category: Components
+type: Data Entry
+title: Autocomplete
+---
+
+Autocomplete function of input field.
+
+## When To Use
+
+When there is a need for autocomplete functionality.
+
+## API
+
+```html
+<input nz-input [(ngModel)]="value" [nzAutocomplete]="auto">
+<nz-autocomplete [nzDataSource]="['12345', '23456', '34567']" #auto></nz-autocomplete>
+```
+
+```html
+<input nz-input [(ngModel)]="value" [nzAutocomplete]="auto">
+<nz-autocomplete #auto>
+  <nz-auto-option [nzValue]="'12345'">12345</nz-auto-option>
+  <nz-auto-option [nzValue]="'23456'">23456</nz-auto-option>
+  <nz-auto-option [nzValue]="'34567'">34567</nz-auto-option>
+</nz-autocomplete>
+```
+
+### [nzAutocomplete]
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| nzAutocomplete | used to bind `nzAutocomplete` components | `NzAutocompleteComponent` | - |
+
+### nz-autocomplete
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| nzBackfill | backfill selected item the input when using keyboard | `boolean` | `false` |
+| nzDataSource | Data source for autocomplete | `AutocompleteDataSource` | - |
+| nzDefaultActiveFirstOption | Whether active first option by default | `boolean` | `true` |
+| nzWidth | Custom width, unit px | `number` | trigger element width |
+