From 6d63908c6a1eeff9384a8fde18d8a746d76ebd48 Mon Sep 17 00:00:00 2001
From: Himanshu Singh <himanshu.singh@joshtechnologygroup.com>
Date: Sun, 6 Jan 2019 13:41:40 +0530
Subject: [PATCH 1/2] added a server side filtering example

---
 src/app/app.component.html                    | 17 ++++++++++++
 src/app/app.component.ts                      | 27 ++++++++++++++++---
 .../mat-select-search.component.scss          |  2 +-
 src/styles.scss                               |  6 +++++
 4 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index efe6abd..f7daf53 100755
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -61,4 +61,21 @@ <h3>Single selection with custom clear icon</h3>
     Selected Bank: {{bankCtrl.value?.name}}
   </p>
   <span class="version-info">Current build: {{version.full}}</span>
+  <h3>Server Side Search</h3>
+  <p>
+    <mat-form-field>
+      <mat-select [formControl]="bankServerSideCtrl" placeholder="Bank">
+        <mat-option disabled="true" class="contains-select-search">
+          <ngx-mat-select-search [formControl]="bankServerSideFilteringCtrl"></ngx-mat-select-search>
+        </mat-option>
+        <mat-option *ngFor="let bank of filteredServerSideBanks | async" [value]="bank">
+          {{bank.name}}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+  </p>
+  <p>
+    Selected Bank: {{bankServerSideCtrl.value?.name}}
+  </p>
+
 </div>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 49e2f6d..0beff8b 100755
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -5,8 +5,7 @@ import {MatSelect} from '@angular/material';
 
 import { ReplaySubject } from 'rxjs';
 import { Subject } from 'rxjs';
-import { take } from 'rxjs/operators';
-import { takeUntil } from 'rxjs/operators';
+import { takeUntil, delay, filter, map, take, debounceTime } from 'rxjs/operators';
 
 interface Bank {
  id: string;
@@ -33,6 +32,12 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
    /** control for the MatSelect filter keyword multi-selection */
   public bankMultiFilterCtrl: FormControl = new FormControl();
 
+    /** control for the selected bank for server side filtering */
+  public bankServerSideCtrl: FormControl = new FormControl();
+
+  /** control for filter for server side. */
+  public bankServerSideFilteringCtrl: FormControl = new FormControl();
+
   /** list of banks */
   private banks: Bank[] = [
     {name: 'Bank A (Switzerland)', id: 'A'},
@@ -61,6 +66,9 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
   /** list of banks filtered by search keyword for multi-selection */
   public filteredBanksMulti: ReplaySubject<Bank[]> = new ReplaySubject<Bank[]>(1);
 
+  /** list of banks filtered after simulating server side search */
+  public  filteredServerSideBanks: ReplaySubject<Bank[]> = new ReplaySubject<Bank[]>(1);
+
   @ViewChild('singleSelect') singleSelect: MatSelect;
   @ViewChild('multiSelect') multiSelect: MatSelect;
 
@@ -87,7 +95,20 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
       .subscribe(() => {
         this.filterBanksMulti();
       });
-
+    this.bankServerSideFilteringCtrl.valueChanges
+      .pipe(
+        takeUntil(this._onDestroy),
+        debounceTime(200),
+        filter(search => !!search),
+        map(search => {
+          if (!this.banks) {
+            return [];
+          }
+          return this.banks.filter(bank => bank.name.toLowerCase().indexOf(search) > -1);
+        }),
+        delay(500) // add server simulation
+      )
+      .subscribe(this.filteredServerSideBanks);
   }
 
   ngAfterViewInit() {
diff --git a/src/app/mat-select-search/mat-select-search.component.scss b/src/app/mat-select-search/mat-select-search.component.scss
index a0a0e46..a06e594 100755
--- a/src/app/mat-select-search/mat-select-search.component.scss
+++ b/src/app/mat-select-search/mat-select-search.component.scss
@@ -54,5 +54,5 @@ $multiple-check-width: 33px;
 }
 /deep/ .cdk-overlay-pane-select-search {
   /* correct offsetY so that the selected option is at the position of the select box when opening */
-  margin-top: -50px;
+  margin-top: 50px; // This won't be required anymore if mat-select-search is inside mat-option.
 }
diff --git a/src/styles.scss b/src/styles.scss
index 99d0ed8..d3ba66c 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -16,3 +16,9 @@ body {
   font-size: 8pt;
   float: right;
 }
+
+.mat-option[aria-disabled=true].contains-select-search {
+  /* let move mat-select-search at the top of the dropdown. As option is disabled, there will be no-ripple hence safe. */
+  position: static;
+  padding: 0;
+}

From 907be488fbd800c8c120e22de44b59ab15399ba4 Mon Sep 17 00:00:00 2001
From: Esteban Marin <estebanmarin@gmx.ch>
Date: Tue, 8 Jan 2019 10:26:42 +0100
Subject: [PATCH 2/2] revert top offset change to avoid breaking change

---
 src/app/mat-select-search/mat-select-search.component.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/mat-select-search/mat-select-search.component.scss b/src/app/mat-select-search/mat-select-search.component.scss
index 84679ed..ab8374d 100755
--- a/src/app/mat-select-search/mat-select-search.component.scss
+++ b/src/app/mat-select-search/mat-select-search.component.scss
@@ -58,5 +58,5 @@ $multiple-check-width: 33px;
 }
 /deep/ .cdk-overlay-pane-select-search {
   /* correct offsetY so that the selected option is at the position of the select box when opening */
-  margin-top: 50px; // This won't be required anymore if mat-select-search is inside mat-option.
+  margin-top: -50px;
 }