Documentation + housekeeping + ensure custom props are passed to preset items

.gitignore

@@ -2,7 +2,7 @@ node_modules
 npm-debug.log
 .DS_Store
 .vscode
-.package-lock.json
+package-lock.json
 
 # Test
 tests/reports

README.md

@@ -165,7 +165,10 @@ Pass an array of objects:
 {
   value: 'Value 2',
   label: 'Label 2',
-  id: 2
+  id: 2,
+  customProperties: {
+  	random: 'I am a custom property'
+  }
 }]
 ```
 
@@ -190,6 +193,10 @@ Pass an array of objects:
   label: 'Option 2',
   selected: false,
   disabled: true,
+  customProperties: {
+    description: 'Custom description about Option 2',
+    random: 'Another random custom property'
+  },
 }]
 ```
 
@@ -269,7 +276,7 @@ Pass an array of objects:
 
 **Input types affected:**`select-one`, `select-multiple`
 
-**Usage:** Specify which fields should be used when a user is searching.
+**Usage:** Specify which fields should be used when a user is searching. If you have added custom properties to your choices, you can add these values thus: `['label', 'value', 'customProperties.example']`.
 
 ### searchFloor
 **Type:** `Number` **Default:** `1`
@@ -506,7 +513,6 @@ example.passedElement.addEventListener('addItem', function(event) {
   console.log(event.detail.label);
   console.log(event.detail.groupValue);
 }, false);
-
 ```
 
 ### addItem
@@ -574,7 +580,9 @@ Methods can be called either directly or by chaining:
 const choices = new Choices(element, {
     addItems: false,
     removeItems: false,
-}).setValue(['Set value 1', 'Set value 2']).disable();
+  })
+  .setValue(['Set value 1', 'Set value 2'])
+  .disable();
 
 // Calling a method directly
 const choices = new Choices(element, {
@@ -648,7 +656,7 @@ choices.disable();
 ### setChoices(choices, value, label, replaceChoices);
 **Input types affected:** `select-one`, `select-multiple`
 
-**Usage:** Set choices of select input via an array of objects, a value name and a label name. This behaves the same as passing items via the `choices` option but can be called after initialising Choices. This can also be used to add groups of choices (see example 2); Optionally pass a true `replaceChoices` value to remove any existing choices.
+**Usage:** Set choices of select input via an array of objects, a value name and a label name. This behaves the same as passing items via the `choices` option but can be called after initialising Choices. This can also be used to add groups of choices (see example 2); Optionally pass a true `replaceChoices` value to remove any existing choices. Optionally pass a `customProperties` object to add additional data to your choices (useful when searching/filtering etc).
 
 **Example 1:**
 
@@ -684,7 +692,10 @@ example.setChoices([{
   choices: [
     {value: 'Child Four', label: 'Child Four', disabled: true},
     {value: 'Child Five', label: 'Child Five'},
-        {value: 'Child Six', label: 'Child Six'},
+    {value: 'Child Six', label: 'Child Six', customProperties: {
+      description: 'Custom description about child six',
+      random: 'Another random custom property'
+    }},
   ]
 }], 'value', 'label', false);
 ```

assets/scripts/src/choices.js

@@ -871,7 +871,13 @@ class Choices {
 
         if (foundChoice) {
           if (!foundChoice.selected) {
-            this._addItem(foundChoice.value, foundChoice.label, foundChoice.id, foundChoice.groupId, foundChoice.customProperties);
+            this._addItem(
+              foundChoice.value,
+              foundChoice.label,
+              foundChoice.id,
+              foundChoice.groupId,
+              foundChoice.customProperties
+            );
           } else if (!this.config.silent) {
             console.warn('Attempting to select choice already selected');
           }
@@ -2673,7 +2679,13 @@ class Choices {
           if (!item.value) {
             return;
           }
-          this._addItem(item.value, item.label, item.id);
+          this._addItem(
+            item.value,
+            item.label,
+            item.id,
+            undefined,
+            item.customProperties
+          );
         } else if (itemType === 'String') {
           this._addItem(item);
         }

index.html

@@ -63,7 +63,7 @@
       <input class="form-control" id="choices-text-prepend-append-value" type="text" value="preset-1, preset-2" placeholder="This is a placeholder">
 
       <label for="choices-text-preset-values">Preset values passed through options</label>
-      <input class="form-control" id="choices-text-preset-values" type="text" value="olivia@benson.com" placeholder="This is a placeholder">
+      <input class="form-control" id="choices-text-preset-values" type="text" value="Michael Smith" placeholder="This is a placeholder">
 
       <label for="choices-text-i18n">I18N labels</label>
       <input class="form-control" data-trigger id="choices-text-i18n" type="text">
@@ -208,7 +208,8 @@
       <label for="choices-single-preset-options">Option and option groups added via config</label>
       <select class="form-control" name="choices-single-preset-options" id="choices-single-preset-options" placeholder="This is a placeholder"></select>
 
-      <label for="choices-single-selected-option">Option selected via config</label>
+      <label for="choices-single-selected-option">Option selected via config with custom properties</label>
+      <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-single-no-sorting">Options without sorting</label>
@@ -306,7 +307,13 @@
       }).removeActiveItems();
 
       var textPresetVal = new Choices('#choices-text-preset-values', {
-        items: ['josh@joshuajohnson.co.uk', { value: 'joe@bloggs.co.uk', label: 'Joe Bloggs' } ],
+        items: ['Josh Johnson', {
+          value: 'joe@bloggs.co.uk',
+          label: 'Joe Bloggs',
+          customProperties: {
+            description: 'Joe Blogg is such a generic name'
+          }
+        }],
       });
 
       var multipleDefault = new Choices(document.getElementById('choices-multiple-groups'));
@@ -433,10 +440,13 @@
       }], 'value', 'label');
 
       var singleSelectedOpt = new Choices('#choices-single-selected-option', {
+        searchFields: ['label', 'value', 'customProperties.description'],
         choices: [
           {value: 'One', label: 'Label One', selected: true},
           {value: 'Two', label: 'Label Two', disabled: true},
-          {value: 'Three', label: 'Label Three'},
+          {value: 'Three', label: 'Label Three', customProperties: {
+            description: 'This option is fantastic'
+          }},
         ],
       }).setValueByChoice('Two');
 

package.json

@@ -33,6 +33,7 @@
     "babel-loader": "^6.2.4",
     "babel-preset-es2015": "^6.6.0",
     "concurrently": "^3.1.0",
+    "core-js": "^2.4.1",
     "csso": "^1.8.2",
     "es6-promise": "^3.2.1",
     "eslint": "^3.3.0",

tests/spec/choices_spec.js

@@ -1,38 +1,16 @@
 import 'whatwg-fetch';
 import 'es6-promise';
+import 'core-js/fn/object/assign';
 import Choices from '../../assets/scripts/src/choices.js';
 import itemReducer from '../../assets/scripts/src/reducers/items.js';
 import choiceReducer from '../../assets/scripts/src/reducers/choices.js';
-import { addItem as addItemAction, addChoice as addChoiceAction } from '../../assets/scripts/src/actions/index.js';
+import {
-
+  addItem as addItemAction,
-if (typeof Object.assign != 'function') {
+  addChoice as addChoiceAction
-  Object.assign = function (target, varArgs) { // .length of function is 2
+} from '../../assets/scripts/src/actions/index.js';
-    if (target == null) { // TypeError if undefined or null
-      throw new TypeError('Cannot convert undefined or null to object');
-    }
-
-    var to = Object(target);
-
-    for (var index = 1; index < arguments.length; index++) {
-      var nextSource = arguments[index];
-
-      if (nextSource != null) { // Skip over if undefined or null
-        for (var nextKey in nextSource) {
-          // Avoid bugs when hasOwnProperty is shadowed
-          if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
-            to[nextKey] = nextSource[nextKey];
-          }
-        }
-      }
-    }
-    return to;
-  };
-}
 
 describe('Choices', () => {
-
   describe('should initialize Choices', () => {
-
     beforeEach(function() {
       this.input = document.createElement('input');
       this.input.type = 'text';
@@ -953,7 +931,7 @@ describe('Choices', () => {
 
   describe('should allow custom properties provided by the user on items or choices', function() {
     it('should allow the user to supply custom properties for an item', function() {
-        var randomItem = {
+      const randomItem = {
         id: 8999,
         choiceId: 9000,
         groupId: 9001,
@@ -964,7 +942,7 @@ describe('Choices', () => {
         }
       }
 
-        var expectedState = [{
+      const expectedState = [{
         id: randomItem.id,
         choiceId: randomItem.choiceId,
         groupId: randomItem.groupId,
@@ -975,13 +953,20 @@ describe('Choices', () => {
         customProperties: randomItem.customProperties
       }];
 
-        var action = addItemAction(randomItem.value, randomItem.label, randomItem.id, randomItem.choiceId, randomItem.groupId, randomItem.customProperties);
+      const action = addItemAction(
+        randomItem.value,
+        randomItem.label,
+        randomItem.id,
+        randomItem.choiceId,
+        randomItem.groupId,
+        randomItem.customProperties
+      );
 
       expect(itemReducer([], action)).toEqual(expectedState);
     });
 
     it('should allow the user to supply custom properties for a choice', function() {
-        var randomChoice = {
+      const randomChoice = {
         id: 123,
         elementId: 321,
         groupId: 213,
@@ -993,7 +978,7 @@ describe('Choices', () => {
         }
       }
 
-        var expectedState = [{
+      const expectedState = [{
         id: randomChoice.id,
         elementId: randomChoice.elementId,
         groupId: randomChoice.groupId,
@@ -1006,7 +991,15 @@ describe('Choices', () => {
         customProperties: randomChoice.customProperties
       }];
 
-        var action = addChoiceAction(randomChoice.value, randomChoice.label, randomChoice.id, randomChoice.groupId, randomChoice.disabled, randomChoice.elementId, randomChoice.customProperties);
+      const action = addChoiceAction(
+        randomChoice.value,
+        randomChoice.label,
+        randomChoice.id,
+        randomChoice.groupId,
+        randomChoice.disabled,
+        randomChoice.elementId,
+        randomChoice.customProperties
+      );
 
       expect(choiceReducer([], action)).toEqual(expectedState);
     });
@@ -1026,8 +1019,7 @@ describe('Choices', () => {
     });
 
     it('should allow the user to supply custom properties for a choice that will be inherited by the item when the user selects the choice', function() {
-
+      const expectedCustomProperties = {
-        var expectedCustomProperties = {
         isBestOptionEver: true
       };
 
@@ -1041,7 +1033,7 @@ describe('Choices', () => {
       }], 'value', 'label', true);
 
       this.choices.setValueByChoice('42');
-        var selectedItems = this.choices.getValue();
+      const selectedItems = this.choices.getValue();
 
       expect(selectedItems.length).toBe(1);
       expect(selectedItems[0].customProperties).toBe(expectedCustomProperties);