feat(module:input): add nzOnSearch property (#876)

close #813

Author: hsuanxyz

src/components/input/nz-input.component.ts

@@ -39,6 +39,7 @@ export interface AutoSizeType {
       <input
         (blur)="_emitBlur($event)"
         (focus)="_emitFocus($event)"
+        (keyup.enter)="_onPressEnter()"
         [attr.id]="nzId"
         [disabled]="nzDisabled"
         [readonly]="nzReadonly"
@@ -67,7 +68,7 @@ export interface AutoSizeType {
         [(ngModel)]="nzValue"></textarea>
     </ng-template>
     <span class="ant-input-suffix" *ngIf="(nzType==='search')||(_suffixContent)">
-      <i class="anticon anticon-search ant-input-search-icon" *ngIf="nzType==='search'"></i>
+      <i class="anticon anticon-search ant-input-search-icon" *ngIf="nzType==='search'" (click)="_emitSearch()"></i>
       <ng-template [ngTemplateOutlet]="_suffixContent">
       </ng-template>
     </span>
@@ -156,6 +157,7 @@ export class NzInputComponent implements AfterContentInit, ControlValueAccessor,
 
   @Output() nzBlur: EventEmitter<FocusEvent> = new EventEmitter();
   @Output() nzFocus: EventEmitter<FocusEvent> = new EventEmitter();
+  @Output() nzOnSearch: EventEmitter<string> = new EventEmitter();
   @ViewChild('inputTextarea') textAreaRef: ElementRef;
   @ContentChild('addOnBefore') _addOnContentBefore: TemplateRef<void>;
   @ContentChild('addOnAfter') _addOnContentAfter: TemplateRef<void>;
@@ -197,6 +199,16 @@ export class NzInputComponent implements AfterContentInit, ControlValueAccessor,
     this.nzFocus.emit($event);
   }
 
+  _onPressEnter(): void {
+    if (this.nzType === 'search') {
+      this._emitSearch();
+    }
+  }
+
+  _emitSearch(): void {
+    this.nzOnSearch.emit(this._value);
+  }
+
   setClassMap(): void {
     this._classMap = {
       [`${this._prefixCls}-${this._size}`]: true,

src/showcase/nz-demo-input/nz-demo-input-search.component.ts

@@ -3,11 +3,15 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-input-search',
   template: `
-    <nz-input [nzType]="'search'" [nzPlaceHolder]="'input search text'" [(ngModel)]="_value" style="width: 200px;"></nz-input>
+    <nz-input [nzType]="'search'" [nzPlaceHolder]="'input search text'" [(ngModel)]="_value" style="width: 200px;" (nzOnSearch)="onSearch($event)"></nz-input>
   `,
 
   styles: []
 })
 export class NzDemoInputSearchComponent {
-  _value: string;
+  _value = '';
+
+  onSearch(event: string): void {
+    console.log(event);
+  }
 }

src/showcase/nz-demo-input/nz-demo-input.html

@@ -186,6 +186,28 @@ <h4 id="Input.TextArea"><span>nz-input[type=textarea]</span>
         </tr>
       </tbody>
     </table>
+    <h4 id="Input.Search"><span>nz-input[type=search]</span>
+      <!-- <a class="anchor">#</a> -->
+    </h4>
+    <p>当 <code>nzType="search"</code> 时，特有的API</p>
+    <table>
+      <thead>
+      <tr>
+        <th>参数</th>
+        <th>说明</th>
+        <th>类型</th>
+        <th>默认值</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr>
+        <td>nzOnSearch</td>
+        <td>回车或点击搜索按钮时的回调</td>
+        <td>EventEmitter&lt;string&gt;</td>
+        <td>-</td>
+      </tr>
+      </tbody>
+    </table>
     <h4 id="Input.Group"><span>nz-input-group</span>
       <!-- <a class="anchor">#</a> -->
     </h4>