feat: added support for search on keys array and json path #297

Author: SDAdham

README.md

@@ -16,7 +16,7 @@
 * search dropdown list
 * arrows keys support
 * limit number of items displayed in dropdown
-* custom sort 
+* custom sort
 * angular forms support
 * angular v4 and above supported
 * cross browser support
@@ -105,7 +105,7 @@ config = {
         moreText: 'more' // text to be displayed whenmore than one items are selected like Option 1 + 5 more
         noResultsFound: 'No results found!' // text to be displayed when no items are found while searching
         searchPlaceholder:'Search' // label thats displayed in search input,
-        searchOnKey: 'name' // key on which search should be performed this will be selective search. if undefined this will be extensive search on all keys
+        searchOnKey: 'name' // key or array of keys on which search should be performed this will be selective search. if undefined this will be extensive search on all keys, you may also provide an object path (array objects are  not supported)
         clearOnSelection: false // clears search criteria when an option is selected if set to true, default is false
         inputDirection: 'ltr' // the direction of the search input can be rtl or ltr(default)
         selectAllLabel: 'Select all' // label that is displayed in multiple selection for select all

projects/demo/src/app/app.component.html

@@ -119,17 +119,17 @@ <h6>Input</h6>
             moreText: 'more' // text to be displayed whenmore than one items are selected like Option 1 + 5 more
             noResultsFound: 'No results found!' // text to be displayed when no items are found while searching
             searchPlaceholder:'Search' // label thats displayed in search input,
-            searchOnKey: 'name' // key on which search should be performed this will be selective search. if undefined this will be extensive search on all keys
+            searchOnKey: 'name' // key or array of keys on which search should be performed this will be selective search. if undefined this will be extensive search on all keys, you may also provide an object path (array objects are  not supported)
             {{ '}' }}</pre>
         <ul>
           <li>
-            <strong>selectedItemTemplate: TemplateRef</strong> - a template reference for the selectedItems 
+            <strong>selectedItemTemplate: TemplateRef</strong> - a template reference for the selectedItems
           </li>
           <li>
-            <strong>optionItemTemplate: TemplateRef</strong> - a template reference for the available options 
+            <strong>optionItemTemplate: TemplateRef</strong> - a template reference for the available options
           </li>
           <li>
-            <strong>notFoundTemplate: TemplateRef</strong> - a template reference in case no matching items for search 
+            <strong>notFoundTemplate: TemplateRef</strong> - a template reference in case no matching items for search
           </li>
           <li>
             <strong>dropdownButtonTemplate: TemplateRef</strong> - a template reference for the dropdown action button
@@ -143,7 +143,7 @@ <h6>Input</h6>
             &lt;span&gt; class="new badge"&gt; &lt;/span&gt;
           &lt;/ng-template&gt;
 
-          &lt;ngx-select-dropdown&gt; [optionItemTemplate]="optionTemplate" 
+          &lt;ngx-select-dropdown&gt; [optionItemTemplate]="optionTemplate"
             [selectedItemTemplate]="optionTemplate"
             tabindex="0" [multiple]="true" [(ngModel)]="optTemplate" [options]="options"
             [config]="config">&lt;/ngx-select-dropdown&gt;</strong>

projects/ngx-select-dropdown/README.md

@@ -16,7 +16,7 @@
 * search dropdown list
 * arrows keys support
 * limit number of items displayed in dropdown
-* custom sort 
+* custom sort
 * angular forms support
 * angular v4 and above supported
 * cross browser support
@@ -105,7 +105,7 @@ config = {
         moreText: 'more' // text to be displayed whenmore than one items are selected like Option 1 + 5 more
         noResultsFound: 'No results found!' // text to be displayed when no items are found while searching
         searchPlaceholder:'Search' // label thats displayed in search input,
-        searchOnKey: 'name' // key on which search should be performed this will be selective search. if undefined this will be extensive search on all keys
+        searchOnKey: 'name' // key or array of keys on which search should be performed this will be selective search. if undefined this will be extensive search on all keys, you may also provide an object path (array objects are  not supported)
         clearOnSelection: false // clears search criteria when an option is selected if set to true, default is false
         inputDirection: 'ltr' // the direction of the search input can be rtl or ltr(default)
         selectAllLabel: 'Select all' // label that is displayed in multiple selection for select all

projects/ngx-select-dropdown/src/lib/pipes/filter-by.pipe.spec.ts

@@ -43,7 +43,11 @@ const testData = [
       email: 'holmes.ratliff@aclima.co.uk',
       phone: '+1 (977) 541-2880',
       address: '736 Dikeman Street, Vallonia, Wyoming, 1370',
-      about: 'Reprehenderit et sint eu sunt occaecat sint dolore minim aliqua aute enim incididunt. Labore officia qui proident esse cupidatat sint deserunt. Velit qui incididunt ullamco ullamco qui. Nostrud in sit laboris sit pariatur esse ea dolore elit enim.'
+      about: 'Reprehenderit et sint eu sunt occaecat sint dolore minim aliqua aute enim incididunt. Labore officia qui proident esse cupidatat sint deserunt. Velit qui incididunt ullamco ullamco qui. Nostrud in sit laboris sit pariatur esse ea dolore elit enim.',
+      otherDetails: {
+         firstName: 'Tea',
+         lastName: 'Pot'
+      }
    },
    {
       _id: '5ab9c820ad13b4f8707133e7',
@@ -154,4 +158,9 @@ describe('FilterByPipe', () => {
       const arr = ['star', 'galaxy', 'sun', 'moon', 'earth'];
       expect(pipe.transform(arr, 'ar')).toEqual(['star', 'earth']);
    });
+
+   it('should return the filtered array of objects', () => {
+      const pipe = new FilterByPipe();
+      expect(pipe.transform(testData, 'Tea', ['firstName', 'otherDetails.firstName'])).toEqual([testData[2]]);
+   });
 });

projects/ngx-select-dropdown/src/lib/pipes/filter-by.pipe.ts

@@ -7,28 +7,49 @@ import { Pipe, PipeTransform } from '@angular/core';
    name: 'filterBy'
 })
 export class FilterByPipe implements PipeTransform {
-   public transform(array: any[], searchText?: string, keyName?: string) {
+   private getValueByPath(obj: any, path: string): any {
+    if (!path) return obj;
+
+    return path.split('.').reduce((acc, part) => acc && acc[part], obj);
+  }
+
+  private predicate(value: any, searchText: string): boolean {
+      return typeof value !== 'object' && typeof value !== 'undefined' && value !== null && value.toString().toLowerCase().indexOf(searchText.trim().toLowerCase()) > -1
+  }
+
+   public transform(array: any[], searchText?: string, keyName?: string | string[]) {
       if (!array || !searchText || !Array.isArray(array)) {
          return array;
       }
       if (typeof array[0] === 'string') {
-         return array.filter((item) => item.toLowerCase().indexOf(searchText.trim().toLowerCase()) > -1);
+         return array.filter((item) => this.predicate(item, searchText));
       }
       // filter array, items which match and return true will be
       // kept, false will be filtered out
       if (!keyName) {
          return array.filter((item: any) => {
             for (const key in item) {
-               if (typeof item[key] !== 'object' && item[key].toString().toLowerCase().indexOf(searchText.trim().toLowerCase()) > -1) {
+               const value = this.getValueByPath(item, key);
+               if (this.predicate(value, searchText)) {
                   return true;
                }
             }
             return false;
          });
       } else {
          return array.filter((item: any) => {
-            if (typeof item[keyName] !== 'object' && item[keyName].toString().toLowerCase().indexOf(searchText.trim().toLowerCase()) > -1) {
-               return true;
+            if (typeof keyName === 'string') {
+               const value = this.getValueByPath(item, keyName);
+               if (this.predicate(value, searchText)) {
+                  return true;
+               }
+            } else {
+               for (const key of keyName) {
+                  const value = this.getValueByPath(item, key);
+                  if (this.predicate(value, searchText)) {
+                     return true;
+                  }
+               }
             }
             return false;
          });

projects/ngx-select-dropdown/src/lib/types/ngx-select-dropdown.types.ts

@@ -9,7 +9,7 @@ export interface NgxDropdownConfig {
   moreText?: string;
   noResultsFound?: string;
   searchPlaceholder?: string;
-  searchOnKey?: string;
+  searchOnKey?: string | string[];
   clearOnSelection?: boolean;
   inputDirection?: string;
   selectAllLabel?: string;