feat(select-input): Add support lazy load items to auto complete

```
<select-input ... (onChangeInputValue)="changeInputValue($event)" ... ></select-input>
````

src/controls/select-input/select-input.component.html

@@ -3,26 +3,26 @@
     <label [ngClass]="labelClass" [attr.for]="'input'+name">{{title | translate}}</label>
     <div [ngClass]="{'inner-addon right-addon':!readonly}">
       <i *ngIf="!readonly" class="fa fa-chevron-down"></i>
-      <input [value]="getInputTitle(value)" (focus)="showMe=true" (blur)="showMe=false" [ngClass]="inputClass" [readonly]="showMe"
-        [disabled]="readonly" [attr.id]="'input'+name" [attr.name]="'input'+name" [attr.placeholder]="placeholder" [tooltip]="tooltipText"
-        placement="{{tooltipPlacement}}" triggers="{{tooltipTriggers}}" container="body" [isDisabled]="!tooltipEnable" (onShown)="showTooltip($event)"
-        #tooltip="bs-tooltip" #inputElement/>
+      <input [value]="getInputTitle(value)" (focus)="showMe=true" (blur)="showMe=false" [ngClass]="inputClass" [readonly]="showMe && inputReadonly"
+        [disabled]="readonly && inputReadonly" [attr.id]="'input'+name" [attr.name]="'input'+name" [attr.placeholder]="placeholder"
+        [tooltip]="tooltipText" placement="{{tooltipPlacement}}" triggers="{{tooltipTriggers}}" container="body" [isDisabled]="!tooltipEnable"
+        (onShown)="showTooltip($event)" #tooltip="bs-tooltip" (keyup)="onKey(inputElement.value)" autocomplete="off" #inputElement/>
     </div>
-    <ng2-auto-complete *ngIf="!readonly && items && items.length>0" [hidden]="!showMe" (valueSelected)="value = $event" show-dropdown-on-init="ignore"
+    <ngui-auto-complete [hidden]="!showMe || !(!readonly && items && items.length>0)" (valueSelected)="value = $event" show-dropdown-on-init="ignore"
       [show-input-tag]="false" [list-formatter]="getTitle" [source]="items" #autoComplete>
-    </ng2-auto-complete>
+    </ngui-auto-complete>
     <span class="help-block" *ngIf="!tooltipEnable && (errorMessage || infoMessage)" [innerHtml]="errorMessage || infoMessage"></span>
   </div>
   <div *ngIf="!inFormGroup">
     <div [ngClass]="{'inner-addon right-addon':!readonly}">
       <i *ngIf="!readonly" class="fa fa-chevron-down"></i>
-      <input [value]="getInputTitle(value)" (focus)="showMe=true" (blur)="showMe=false" [ngClass]="inputClass" [readonly]="showMe"
-        [disabled]="readonly" [attr.id]="'input'+name" [attr.name]="'input'+name" [attr.placeholder]="placeholder" [tooltip]="tooltipText"
-        placement="{{tooltipPlacement}}" triggers="{{tooltipTriggers}}" container="body" [isDisabled]="!tooltipEnable" (onShown)="showTooltip($event)"
-        #tooltip="bs-tooltip" #inputElement/>
+      <input [value]="getInputTitle(value)" (focus)="showMe=true" (blur)="showMe=false" [ngClass]="inputClass" [readonly]="showMe && inputReadonly"
+        [disabled]="readonly && inputReadonly" [attr.id]="'input'+name" [attr.name]="'input'+name" [attr.placeholder]="placeholder"
+        [tooltip]="tooltipText" placement="{{tooltipPlacement}}" triggers="{{tooltipTriggers}}" container="body" [isDisabled]="!tooltipEnable"
+        (onShown)="showTooltip($event)" #tooltip="bs-tooltip" (keyup)="onKey(inputElement.value)" autocomplete="off" #inputElement/>
     </div>
-    <ng2-auto-complete *ngIf="!readonly && items && items.length>0" [hidden]="!showMe" (valueSelected)="value = $event" show-dropdown-on-init="ignore"
+    <ngui-auto-complete [hidden]="!showMe || !(!readonly && items && items.length>0)" (valueSelected)="value = $event" show-dropdown-on-init="ignore"
       [show-input-tag]="false" [list-formatter]="getTitle" [source]="items" #autoComplete>
-    </ng2-auto-complete>
+    </ngui-auto-complete>
   </div>
 </div>

src/controls/select-input/select-input.component.scss

@@ -1,10 +1,10 @@
-.select-input .ng2-auto-complete {
+.select-input .ngui-auto-complete {
     cursor: pointer;
     position: absolute;
     z-index: 10000;
     white-space: nowrap;
 }
-.select-input .ng2-auto-complete .no-match-found{
+.select-input .ngui-auto-complete .no-match-found{
   display: none;
 }
 .select-input .inner-addon {

src/controls/select-input/select-input.component.ts

@@ -1,10 +1,12 @@
 import { Component, OnInit, Input, EventEmitter, Output, ViewChild, ElementRef, ViewEncapsulation } from '@angular/core';
 import { BrowserModule, DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { Ng2AutoCompleteComponent } from 'ng2-auto-complete';
+import { NguiAutoCompleteComponent } from '@ngui/auto-complete';
 import * as _ from 'lodash';
 import { TranslateService } from '@ngx-translate/core';
 import { TooltipDirective } from 'ng2-bootstrap/tooltip';
 import { SelectInputConfig } from './select-input.config';
+import { Observable } from 'rxjs/Observable';
+import { Subject } from 'rxjs/Subject';
 
 @Component({
   selector: 'select-input',
@@ -14,23 +16,23 @@ import { SelectInputConfig } from './select-input.config';
 })
 
 export class SelectInputComponent implements OnInit {
+  @Output()
+  public onChangeInputValue: EventEmitter<string> = new EventEmitter<string>();
   @Input()
-  labelClass?: string = 'control-label';
+  public labelClass?: string = 'control-label';
   @Input()
-  inputClass?: string = 'form-control';
+  public inputClass?: string = 'form-control';
   @ViewChild('tooltip')
   public tooltip: TooltipDirective;
   @ViewChild('autoComplete')
-  public autoComplete: Ng2AutoCompleteComponent;
+  public autoComplete: NguiAutoCompleteComponent;
   @ViewChild('inputElement')
   public inputElement: ElementRef;
   @Input()
   public inFormGroup: boolean = true;
   @Input()
   public focused: boolean = false;
   @Input()
-  public items: any[] = [];
-  @Input()
   public readonly: boolean = false;
   @Input()
   public name: string = 'select';
@@ -64,11 +66,37 @@ export class SelectInputComponent implements OnInit {
   public tooltipPlacement: string = 'bottom';
   @Input()
   public tooltipTriggers: string = 'hover focus';
-
+  @Input()
+  public set items(items: any[]) {
+    this._items = items;
+    if (this.autoComplete) {
+      if (JSON.stringify(this.autoComplete.source) === JSON.stringify(items)) {
+        return;
+      }
+      this.autoComplete.source = items;
+      if (this.showMe) {
+        this._showMe = false;
+        this.autoComplete.reloadList('');
+        setTimeout(() => {
+          this.resizeList();
+          this._showMe = true;
+        }, 300);
+      } else {
+        this.autoComplete.reloadList('');
+        setTimeout(() => {
+          this.resizeList();
+        }, 300);
+      }
+    }
+  }
+  public get items() {
+    return this._items;
+  }
+  private _items: any[] = [];
   public errorsValue: any;
   public infoValue: any;
   private _showMe: boolean = false;
-
+  private debouncer: Subject<string> = new Subject<string>();
   public getTitle: any;
   constructor(
     public sanitizer: DomSanitizer,
@@ -87,6 +115,9 @@ export class SelectInputComponent implements OnInit {
     if (this.inputTitleField === undefined) {
       this.inputTitleField = config.inputTitleField;
     }
+    this.debouncer
+      .debounceTime(300)
+      .subscribe((value: string) => this.onChangeInputValue.emit(value));
   }
   ngOnInit() {
     this.errors.subscribe((data: any) => {
@@ -107,6 +138,15 @@ export class SelectInputComponent implements OnInit {
     });
     this.init();
   }
+  get inputReadonly() {
+    return this.onChangeInputValue.observers && this.onChangeInputValue.observers.length == 0;
+  }
+  onKey(value: string) {
+    if (!value && !this.inputReadonly) {
+      this.value = null;
+    }
+    this.debouncer.next(value);
+  }
   showTooltip() {
     let tooltip: any = this.tooltip;
     if (!tooltip._tooltip || !tooltip._tooltip._componentRef || !tooltip._tooltip._componentRef.location.nativeElement) {
@@ -122,8 +162,8 @@ export class SelectInputComponent implements OnInit {
     return this._showMe;
   }
   set showMe(val: any) {
-    this.resizeList();
     setTimeout(() => {
+      this.resizeList();
       this._showMe = val;
     }, 300);
   }
@@ -133,7 +173,7 @@ export class SelectInputComponent implements OnInit {
   set value(val: any) {
     if (this.errorsValue && this.errorsValue[this.name]) {
       delete this.errorsValue[this.name];
-      this.tooltipText='';
+      this.tooltipText = '';
     }
     this.model = val;
     this.modelChange.emit(this.model);
@@ -205,20 +245,26 @@ export class SelectInputComponent implements OnInit {
       this.inputElement && this.inputElement.nativeElement) {
       let options: any = this.autoComplete.el.children[0].children[0].children;
       let select: any = this.autoComplete.el.children[0];
-      if (this.items && options.length === this.items.length) {
-        for (let i = 0; i < options.length; i++) {
-          if (this.width === null) {
-            options[i].style.width = this.inputElement.nativeElement.offsetWidth + 'px';
-          } else {
-            options[i].style.width = this.width;
-          }
+      //if (this.items && options.length >= this.items.length) {
+      for (let i = 0; i < options.length; i++) {
+        if (this.width === null) {
+          options[i].style.width = this.inputElement.nativeElement.offsetWidth + 'px';
+        } else {
+          options[i].style.width = this.width;
         }
-        select.style.display = '';
       }
+      select.style.display = '';
+      //}
+    } else {
+      setTimeout(() => {
+        this.resizeList();
+      }, 200);
     }
   }
   focus() {
-    this.autoComplete.dropdownVisible = true;
+    if (this.autoComplete) {
+      this.autoComplete.dropdownVisible = true;
+    }
   }
   getInputTitle(item: any) {
     if (item && item[this.inputTitleField]) {

src/grids/content-types-grid/content-type-select-input/content-type-select-input.component.html

@@ -5,7 +5,7 @@
     <input *ngIf="statusListMessage" value="{{statusListMessage | translate}}" class="form-control" disabled/>
     <input *ngIf="!statusListMessage && !select" [(ngModel)]="value && value.asString" class="form-control" #inputElement disabled/>
     <select-input *ngIf="!statusListMessage && select" [(model)]="value" [title]="title" titleField="asSelectOptionHtml" inputTitleField="asString"
-      [readonly]="readonly" [items]="items" [inFormGroup]="false" [width]="width" #inputElement></select-input>
+      [readonly]="readonly" [items]="items" [inFormGroup]="false" (onChangeInputValue)="changeInputValue($event)" #inputElement></select-input>
     <span class="input-group-btn" *ngIf="!readonly && !select">
       <button class="btn btn-success" type="button" (click)="onLookup()"
               tooltip="{{lookupTooltip}}" placement="left"  container="body">

src/grids/content-types-grid/content-type-select-input/content-type-select-input.component.ts

@@ -92,6 +92,11 @@ export class ContentTypeSelectInputComponent extends ResourceSelectInputComponen
     }
     this.cachedResourcesService = contentTypesService.createCache();
   }
+  changeInputValue(value: string) {
+    let filter: any = {};
+    this.cachedResourcesService.ignoreCache = true;
+    this.cachedResourcesService.loadAll(value, filter);
+  }
   get account(): User {
     return this.accountService.account;
   }
@@ -116,4 +121,7 @@ export class ContentTypeSelectInputComponent extends ResourceSelectInputComponen
     itemModal.item = this.value;
     itemModal.modal.show();
   }
+  get statusListMessage() {
+    return '';
+  }
 }

src/module.ts

@@ -7,7 +7,7 @@ import { HttpModule } from '@angular/http';
 import { TranslateModule } from '@ngx-translate/core';
 import { RuckenComponents } from './components';
 import { Ng2BootstrapModule } from 'ng2-bootstrap';
-import { Ng2AutoCompleteModule } from 'ng2-auto-complete';
+import { NguiAutoCompleteModule } from '@ngui/auto-complete';
 import { TextMaskModule } from 'angular2-text-mask';
 
 @NgModule({
@@ -22,7 +22,7 @@ import { TextMaskModule } from 'angular2-text-mask';
     TextMaskModule,
     HttpModule,
     Ng2BootstrapModule,
-    Ng2AutoCompleteModule,
+    NguiAutoCompleteModule,
     TranslateModule.forRoot()
   ],
   providers: [],