Added custom properties to options

Added custom properties to options to be searchable on select.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "choices.js",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "A vanilla JS customisable text input/select box plugin",
   "main": "./public/assets/scripts/choices.min.js",
   "types": "./types/index.d.ts",

public/index.html

@@ -16,7 +16,7 @@
   <meta name="theme-color" content="#ffffff">
 
   <!-- Ignore these -->
-  <link rel="stylesheet" href="assets/styles/base.min.css?version=5.0.0">
+  <link rel="stylesheet" href="assets/styles/base.min.css?version=5.1.0">
   <!-- End ignore these -->
 
   <!-- Optional includes -->
@@ -24,8 +24,8 @@
   <!-- End optional includes -->
 
   <!-- Choices includes -->
-  <link rel="stylesheet" href="assets/styles/choices.min.css?version=5.0.0">
+  <link rel="stylesheet" href="assets/styles/choices.min.css?version=5.1.0">
-  <script src="assets/scripts/choices.min.js?version=5.0.0"></script>
+  <script src="assets/scripts/choices.min.js?version=5.1.0"></script>
   <!-- End Choices includes -->
 
   <!--[if lt IE 9]>
@@ -229,6 +229,14 @@
       <p><small>Try searching for 'fantastic'</small></p>
       <select class="form-control" name="choices-single-selected-option" id="choices-single-selected-option" placeholder="This is a placeholder"></select>
 
+      <label for="choices-with-custom-props-via-html">Option searchable by custom properties via <code>data-custom-properties</code> attribute</label>
+      <p><small>Try searching for 'fantastic', again</small>
+      <select class="form-control" id="choices-with-custom-props-via-html">
+        <option value="Dropdown item 1">Label One</option>
+        <option value="Dropdown item 2" selected disabled>Label Two</option>
+        <option value="Dropdown item 3" data-custom-properties='This option is fantastic'>Label Three</option>
+      </select>
+
       <label for="choices-single-no-sorting">Options without sorting</label>
       <select class="form-control" name="choices-single-no-sorting" id="choices-single-no-sorting" placeholder="This is a placeholder">
         <option value="Madrid">Madrid</option>
@@ -496,6 +504,10 @@
         ],
       }).setChoiceByValue('Two');
 
+      var customChoicesPropertiesViaDataAttributes = new Choices('#choices-with-custom-props-via-html', {
+       searchFields: ['label', 'value', 'customProperties']
+      })
+
       var singleNoSorting = new Choices('#choices-single-no-sorting', {
         shouldSort: false,
       });

src/scripts/choices.js

@@ -1919,13 +1919,12 @@ class Choices {
           selected: o.selected,
           disabled: o.disabled || o.parentNode.disabled,
           placeholder: o.hasAttribute('placeholder'),
+          customProperties: o.getAttribute('data-custom-properties'),
         });
       });
 
       // If sorting is enabled or the user is searching, filter choices
-      if (this.config.shouldSort) {
+      if (this.config.shouldSort) allChoices.sort(filter);
-        allChoices.sort(filter);
-      }
 
       // Determine whether there is a selected choice
       const hasSelectedChoice = allChoices.some(choice => choice.selected);

src/scripts/templates.js

@@ -78,6 +78,7 @@ export const TEMPLATES = {
           data-item
           data-id="${data.id}"
           data-value="${data.value}"
+          data-custom-properties='${data.customProperties}'
           data-deletable
           ${ariaSelected}
           ${ariaDisabled}
@@ -225,6 +226,10 @@ export const TEMPLATES = {
     return strToEl(`
       <option value="${data.value}" ${data.active ? 'selected' : ''} ${
       data.disabled ? 'disabled' : ''
+    } ${
+      data.customProperties
+        ? `data-custom-properties=${data.customProperties}`
+        : ''
     }>${data.label}</option>
     `);
   },