Merge pull request #146 from bindable-ui/dd/search3

Highlight Search Phrases

dev-app/app.html

@@ -52,7 +52,7 @@
                     <c-nav-horizontal-item
                         position="right"
                         href="https://github.com/bindable-ui/bindable"
-                        title="v1.11.6"
+                        title="v1.11.7"
                     ></c-nav-horizontal-item>
                 </c-nav-horizontal>
             </l-box>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bindable-ui/bindable",
   "description": "An Aurelia component library",
-  "version": "1.11.6",
+  "version": "1.11.7",
   "repository": {
     "type": "git",
     "url": "https://github.com/bindable-ui/bindable"

src/components/tables/c-table/c-table-interfaces.ts

@@ -71,6 +71,11 @@ export interface CTableCol {
      * If you need to highlight a search string in the table (currently only supported on c-td-truncate)
      */
     getSearchVal?(): string;
+
+    /**
+     * For custom search queries, pass in the words and phrases in an array that you would like to highlight
+     */
+    getSearchPhrases?(): string[];
 }
 
 export interface CTableActions {

src/components/tables/td-contents/c-td-truncate/c-td-truncate.ts

@@ -3,6 +3,7 @@
 Licensed under the terms of the MIT license. See the LICENSE file in the project root for license terms.
 */
 
+import {highlightSearchPhrases} from '../../../../helpers/highlight-phrases';
 import {highlightSearchText} from '../../../../helpers/highlight-text';
 
 import * as styles from './c-td-truncate.css.json';
@@ -23,5 +24,12 @@ export class CTdTruncate {
                 this.searchHighlight = highlightSearchText(searchVal, this.value);
             }
         }
+
+        if (model.col && _.isFunction(model.col.getSearchPhrases)) {
+            const searchPhrases = model.col.getSearchPhrases();
+            if (searchPhrases.length > 0) {
+                this.searchHighlight = highlightSearchPhrases(searchPhrases, this.value);
+            }
+        }
     }
 }

src/helpers/highlight-phrases.ts

@@ -0,0 +1,13 @@
+export const highlightSearchPhrases = (searchPhrases: string[], matchAgainst?: string): string => {
+    let title = matchAgainst || '';
+    title = title
+        .replace('&', '&')
+        .replace('<', '&lt;')
+        .replace('>', '&gt;');
+    if (searchPhrases && searchPhrases.length > 0) {
+        searchPhrases.forEach(orig => {
+            title = title.replace(orig, `<span style="background-color: #226684;">${orig}</span>`);
+        });
+    }
+    return title;
+};