message: update search demo
diff: import { Component, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
  -import 'rxjs/add/operator/distinctUntilChanged';
  -import 'rxjs/add/operator/debounceTime';
  -import 'rxjs/add/operator/switchMap';
  -import 'rxjs/add/observable/of';
  +import { distinctUntilChanged, debounceTime, switchMap } from 'rxjs/operators'
  import { DataService } from '../shared/data.service';
  @Component({
  @@ -12,22 +9,33 @@ import { DataService } from '../shared/data.service';
  <h5>Default search</h5>
  <hr>
  <p>
  - By default ng-select will search in visible label text
  + By default ng-select will search using label text
  </p>
  ---html,true
  - <ng-select [items]="clientSideFilterItems"
  + <ng-select [items]="people"
  bindLabel="name"
  [(ngModel)]="selectedPerson">
  </ng-select>
  ---
  - <p>
  - Selected person: {{selectedPerson | json}}
  - </p>
  + <br/>
  - <h5>Custom search</h5>
  + <h5>Search across multiple fields</h5>
  <hr>
  + <p>Use <b>typeahead</b> to get search term and filter on custom fields. Type <b>female</b> to see only females.</p>
  +
  + ---html,true
  + <ng-select [items]="peopleFiltered"
  + bindLabel="name"
  + [typeahead]="searchTerm"
  + [(ngModel)]="selectedCustom">
  + </ng-select>
  + ---
  + <br/>
  +
  - <p>Use <b>typeahead</b> Input to subscribe to user term and load items</p>
  + <h5>Custom server-side search</h5>
  + <hr>
  + <p>Use <b>typeahead</b> to subscribe to search term and load async items</p>
  <label>Multi select + Typeahead + Custom items (tags)</label>
  ---html,true
  <ng-select [items]="serverSideFilterItems"
  @@ -46,10 +54,11 @@ import { DataService } from '../shared/data.service';
  })
  export class SelectSearchComponent {
  - clientSideFilterItems = [];
  - selectedPerson1 = null;
  -
  + people = [];
  + peopleFiltered = [];
  serverSideFilterItems = [];
  +
  + searchTerm = new EventEmitter<string>();
  peopleTypeahead = new EventEmitter<string>();
  selectedPersons = [{
  name: 'Karyn Wright'
  @@ -59,21 +68,21 @@ export class SelectSearchComponent {
  ngOnInit() {
  this.loadPeopleForClientSide();
  - this.serverSideFilter();
  + this.serverSideSearch();
  + this.searchTerm.subscribe(term => this.customSearch(term));
  }
  - private loadPeopleForClientSide() {
  - this.dataService.getPeople().subscribe(x => {
  - this.clientSideFilterItems = x;
  - });
  + private customSearch(searchTerm) {
  + const term = searchTerm.toUpperCase();
  + this.peopleFiltered = this.people.filter(item => item.name.toUpperCase().indexOf(term) > -1 || item.gender.toUpperCase() === term)
  }
  - private serverSideFilter() {
  - this.peopleTypeahead
  - .distinctUntilChanged()
  - .debounceTime(200)
  - .switchMap(term => this.dataService.getPeople(term))
  - .subscribe(x => {
  + private serverSideSearch() {
  + this.peopleTypeahead.pipe(
  + distinctUntilChanged(),
  + debounceTime(200),
  + switchMap(term => this.dataService.getPeople(term))
  + ).subscribe(x => {
  this.cd.markForCheck();
  this.serverSideFilterItems = x;
  }, (err) => {
  @@ -81,6 +90,13 @@ export class SelectSearchComponent {
  this.serverSideFilterItems = [];
  });
  }
  +
  + private loadPeopleForClientSide() {
  + this.dataService.getPeople().subscribe(x => {
  + this.people = x;
  + this.peopleFiltered = x;
  + });
  + }
  }
  