Search Filter Enhancemnet with filtered data count and Search font an…

src/ng-multiselect-dropdown/src/multi-select.component.html

@@ -23,6 +23,7 @@
       </li>
       <li class="filter-textbox" *ngIf="(_data.length>0 || _settings.allowRemoteDataSearch) && _settings.allowSearchFilter">
         <input type="text" aria-label="multiselect-search" [readOnly]="disabled" [placeholder]="_settings.searchPlaceholderText" [(ngModel)]="filter.text" (ngModelChange)="onFilterTextChange($event)">
+        <span *ngIf="_settings.showSearchFilterCount && (filter.text && (_data | multiSelectFilter:filter).length !== 0)" class="badge" [ngStyle]="{'color': _settings.searchFilterCountColor,'background-color': _settings.searchFilterCountBgcolor}">{{(_data | multiSelectFilter:filter).length}}</span>
       </li>
     </ul>
     <ul class="item2" [style.maxHeight]="_settings.maxHeight+'px'">

src/ng-multiselect-dropdown/src/multi-select.component.scss

@@ -108,12 +108,16 @@ $disable-background-color: #eceeef;
     padding: 10px;
     input {
       border: 0px;
-      width: 100%;
+      width: 90%;
       padding: 0px 0px 0px 26px;
+      font-size:  1.6rem sans-serif;;
     }
     input:focus {
       outline: none;
     }
+    input::placeholder {
+      font: 1.6rem sans-serif;
+    }
   }
 }
 

src/ng-multiselect-dropdown/src/multiselect.component.ts

@@ -36,6 +36,9 @@ export class MultiSelectComponent implements ControlValueAccessor {
     selectAllText: "Select All",
     unSelectAllText: "UnSelect All",
     allowSearchFilter: false,
+    showSearchFilterCount: true,
+    searchFilterCountColor:'white',
+    searchFilterCountBgcolor:'#337ab7',
     limitSelection: -1,
     clearSearchFilter: true,
     maxHeight: 197,

src/ng-multiselect-dropdown/src/multiselect.model.ts

@@ -8,6 +8,9 @@ export interface IDropdownSettings {
   selectAllText?: string;
   unSelectAllText?: string;
   allowSearchFilter?: boolean;
+  showSearchFilterCount?:boolean;
+  searchFilterCountColor?:string;
+  searchFilterCountBgcolor?:string;
   clearSearchFilter?: boolean;
   maxHeight?: number;
   itemsShowLimit?: number;