Add config option for custom filter

README.md

@@ -58,6 +58,7 @@ The following optional configuration items can be used.
 | dropUp        | false    | Show the menu above the cursor instead of below. |
 | maxItems      | ∞        | Limit the number of items shown in the text. The default is no limit. |
 | mentionSelect |          | A function to format the selected item before inserting the text. |
+| mentionFilter |          | A function that returns the items to display. |
 | allowSpace    | false    | Allow spaces while mentioning. |
 | returnTrigger | false    | Include the trigger char in the searchTerm event. |
 

projects/angular-mentions/src/lib/mention-config.ts

@@ -24,19 +24,22 @@ export interface Mentions {
   // option to disable sorting
   disableSort?:boolean;
 
-  // option to diable internal filtering. can be used to show the full list returned
-  // from an async operation (or allows a custom filter function to be used - in future)
+  // option to disable internal filtering. can be used to show the full list returned
+  // from an async operation
   disableSearch?:boolean;
 
   // display menu above text instead of below
   dropUp?:boolean;
 
   // whether to allow space while mentioning or not
-  allowSpace?: boolean;
+  allowSpace?:boolean;
 
-  // option to include the trigger char in the serachTerm event
-  returnTrigger?: boolean;
+  // option to include the trigger char in the searchTerm event
+  returnTrigger?:boolean;
 
   // optional function to format the selected item before inserting the text
-  mentionSelect?:(item: any, triggerChar?:string) => (string);
+  mentionSelect?:(item:any, triggerChar?:string) => (string);
+
+  // optional function to customize the search implementation
+  mentionFilter?:(searchString:string, items?:any) => (any[]);
 }

projects/angular-mentions/src/lib/mention.directive.ts

@@ -53,7 +53,13 @@ export class MentionDirective implements OnChanges {
     maxItems: -1,
     allowSpace: false,
     returnTrigger: false,
-    mentionSelect: (item: any, triggerChar?:string) => this.activeConfig.triggerChar + item[this.activeConfig.labelKey]
+    mentionSelect: (item: any, triggerChar?: string) => {
+      return this.activeConfig.triggerChar + item[this.activeConfig.labelKey];
+    },
+    mentionFilter: (searchString: string, items: any[]) => {
+      const searchStringLowerCase = searchString.toLowerCase();
+      return items.filter(e => e[this.activeConfig.labelKey].toLowerCase().startsWith(searchStringLowerCase));
+    }
   }
 
   // template to use for rendering list items
@@ -325,8 +331,9 @@ export class MentionDirective implements OnChanges {
       let objects = this.activeConfig.items;
       // disabling the search relies on the async operation to do the filtering
       if (!this.activeConfig.disableSearch && this.searchString && this.activeConfig.labelKey) {
-        let searchStringLowerCase = this.searchString.toLowerCase();
-        objects = objects.filter(e => e[this.activeConfig.labelKey].toLowerCase().startsWith(searchStringLowerCase));
+        if (this.activeConfig.mentionFilter) {
+          objects = this.activeConfig.mentionFilter(this.searchString, objects);
+        }
       }
       matches = objects;
       if (this.activeConfig.maxItems > 0) {

projects/demo-app/src/app/demo-config/demo-config.component.ts

@@ -12,31 +12,36 @@ export class DemoConfigComponent {
     {
       "value" : "user1",
       "email": "[email protected]",
-      "name": "User 1"
+      "name": "User One"
     },
     {
       "value" : "user2",
       "email": "[email protected]",
-      "name": "User 2"
+      "name": "User Two"
     },
     {
       "value" : "user3",
       "email": "[email protected]",
-      "name": "User 3"
+      "name": "User Three"
     }
   ];
 
   format(item:any) {
     return item['value'].toUpperCase();
   }
 
+  filter(searchString: string, items: any[]): any[] {
+    return items.filter(item => item.name.toLowerCase().includes(searchString));
+  }
+
   mentionConfig:MentionConfig = {
     mentions: [
       {
         items: this.complexItems,
         labelKey: 'name',
         triggerChar: '#',
-        mentionSelect: this.format
+        mentionSelect: this.format,
+        mentionFilter: this.filter
       },
       {
         items: COMMON_NAMES,