From b159723069aea21470104a26277dc4bb3a4ef869 Mon Sep 17 00:00:00 2001
From: Adham Sabry <dom.sabry@gmail.com>
Date: Sat, 31 May 2025 16:17:00 +1000
Subject: [PATCH] feat: added support for search on keys array and json path
 #297

---
 README.md                                     |  4 +--
 projects/demo/src/app/app.component.html      | 10 +++---
 projects/ngx-select-dropdown/README.md        |  4 +--
 .../src/lib/pipes/filter-by.pipe.spec.ts      | 11 ++++++-
 .../src/lib/pipes/filter-by.pipe.ts           | 31 ++++++++++++++++---
 .../lib/types/ngx-select-dropdown.types.ts    |  2 +-
 6 files changed, 46 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index d7cc5c3..c7b51fc 100644
--- a/README.md
+++ b/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
diff --git a/projects/demo/src/app/app.component.html b/projects/demo/src/app/app.component.html
index 13e28e4..5c5847c 100644
--- a/projects/demo/src/app/app.component.html
+++ b/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>
diff --git a/projects/ngx-select-dropdown/README.md b/projects/ngx-select-dropdown/README.md
index d7cc5c3..c7b51fc 100644
--- a/projects/ngx-select-dropdown/README.md
+++ b/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
diff --git a/projects/ngx-select-dropdown/src/lib/pipes/filter-by.pipe.spec.ts b/projects/ngx-select-dropdown/src/lib/pipes/filter-by.pipe.spec.ts
index a6e3ce2..ccf4945 100644
--- a/projects/ngx-select-dropdown/src/lib/pipes/filter-by.pipe.spec.ts
+++ b/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]]);
+   });
 });
diff --git a/projects/ngx-select-dropdown/src/lib/pipes/filter-by.pipe.ts b/projects/ngx-select-dropdown/src/lib/pipes/filter-by.pipe.ts
index c0c534d..aba56f9 100644
--- a/projects/ngx-select-dropdown/src/lib/pipes/filter-by.pipe.ts
+++ b/projects/ngx-select-dropdown/src/lib/pipes/filter-by.pipe.ts
@@ -7,19 +7,30 @@ 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;
                }
             }
@@ -27,8 +38,18 @@ export class FilterByPipe implements PipeTransform {
          });
       } 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;
          });
diff --git a/projects/ngx-select-dropdown/src/lib/types/ngx-select-dropdown.types.ts b/projects/ngx-select-dropdown/src/lib/types/ngx-select-dropdown.types.ts
index 0a895ac..2b6df18 100644
--- a/projects/ngx-select-dropdown/src/lib/types/ngx-select-dropdown.types.ts
+++ b/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;