Added terms functionality for searching

docs/properties.md

@@ -6,6 +6,7 @@
 | options | Array | [] | List of options <br/>[<br/>  { label: 'Option 1', value: '1' }, <br/>  { label: 'Option 2', value: '2' }<br/>  ...<br/>] |
 | labelKey | String | label | Object key to use to get label from options array |
 | valueKey | String | value | Object key to use to get value from options array |
+| termsKey | String | label | Object key to use to get array of string terms from options array |
 | disabledOptions | Array | [] | List of values to disable options <br/>e.g - [2, 3, 9] |
 | multiple | Boolean | false | Enable multi-select |
 | search | Boolean | false - for single select <br/>true - for multi-select | Enable search feature |

src/sass/partials/virtual-select.scss

@@ -227,6 +227,10 @@
   padding: 20px 10px;
 }
 
+.vscomp-termsmatch {
+  font-style: italic;
+}
+
 .vscomp-wrapper {
   .checkbox-icon {
     display: inline-flex;

src/virtual-select.js

@@ -13,8 +13,9 @@ export class VirtualSelect {
    * @property {object[]} options - Array of object to show as options
    * @property {(string|number)} options[].value - Value of the option
    * @property {(string|number)} options[].label - Display text of the option
-   * @property {string} [valueKey=value] - Key name to get value from options object
    * @property {string} [labelKey=label] - Key name to get display text from options object
+   * @property {string} [valueKey=value] - Key name to get value from options object
+   * @property {string} [termsKey=terms] - Key name to get array of string terms from options object
    * @property {boolean} [multiple=false] - Enable multiselect
    * @property {boolean} [search=false] - Enable search
    * @property {boolean} [hideClearButton=false] - Hide clear button
@@ -366,8 +367,9 @@ export class VirtualSelect {
     this.setPropsFromElementAttr(options);
 
     this.$ele = options.ele;
-    this.valueKey = options.valueKey;
     this.labelKey = options.labelKey;
+    this.valueKey = options.valueKey;
+    this.termsKey = options.termsKey;
     this.optionsCount = parseInt(options.optionsCount);
     this.halfOptionsCount = Math.ceil(this.optionsCount / 2);
     this.optionHeightText = options.optionHeight;
@@ -401,8 +403,9 @@ export class VirtualSelect {
 
   setDefaultProps(options) {
     let defaultOptions = {
-      valueKey: 'value',
       labelKey: 'label',
+      valueKey: 'value',
+      termsKey: 'terms',
       optionsCount: 5,
       noOfDisplayValues: 50,
       optionHeight: '40px',
@@ -428,6 +431,7 @@ export class VirtualSelect {
       placeholder: 'placeholder',
       'data-label-key': 'labelKey',
       'data-value-key': 'valueKey',
+      'data-terms-key': 'termsKey',
       'data-search': 'search',
       'data-hide-clear-button': 'hideClearButton',
       'data-options-count': 'optionsCount',
@@ -531,8 +535,9 @@ export class VirtualSelect {
 
     let disabledOptions = this.disabledOptions;
     let hasDisabledOptions = disabledOptions.length;
-    let valueKey = this.valueKey;
     let labelKey = this.labelKey;
+    let valueKey = this.valueKey;
+    let termsKey = this.termsKey;
     this.visibleOptionsCount = options.length;
 
     this.options = options.map((d, i) => {
@@ -542,6 +547,7 @@ export class VirtualSelect {
         value,
         label: d[labelKey] || '',
         isVisible: true,
+        terms: Array.isArray(d[termsKey]) ? d[termsKey] : [],
       };
 
       if (hasDisabledOptions) {
@@ -688,17 +694,24 @@ export class VirtualSelect {
 
       if (markSearchResults) {
         /** remove previous modifications to the label */
-        d.label = d.label.replace(/<\/*mark>/g, '');
+        d.label = d.label.replace(/<\/?mark.*?>/g, '');
       }
 
-      let value = d.label.toString().toLowerCase();
-      let isVisible = value.indexOf(searchValue) !== -1;
+      const value = d.label.toString().toLowerCase();
+      const matchedLabel = value.indexOf(searchValue) !== -1;
+      const matchedTerms = matchedLabel ? false : d.terms.some(x => x.indexOf(searchValue) !== -1);
+      let isVisible = matchedLabel || matchedTerms;
       d.isVisible = isVisible;
 
       if (isVisible) {
         visibleOptionsCount++;
         if (markSearchResults) {
-          d.label = d.label.replace(new RegExp(`(${searchValue})`, 'gi'), `<mark>$1</mark>`);
+          if (matchedLabel) {
+            d.label = d.label.replace(new RegExp(`(${searchValue})`, 'gi'), `<mark>$1</mark>`);
+          } else if (matchedTerms) {
+            /** if we didn't match the label but matched any of the terms mark the entire label */
+            d.label = `<mark class="vscomp-termsmatch">${d.label}</mark>`;
+          }
         }
       }