From 400a70e5cb1df2a6c5e5229c593c6698450b0af3 Mon Sep 17 00:00:00 2001
From: Josh Johnson <josh@jshjohnson.com>
Date: Sat, 30 Jul 2016 15:12:22 +0100
Subject: [PATCH] Options array in config

---
 README.md                     | 106 ++++++++++++++++++++--
 assets/scripts/src/choices.js |  24 ++++-
 index.html                    | 163 ++++++++++++++++++----------------
 3 files changed, 208 insertions(+), 85 deletions(-)

diff --git a/README.md b/README.md
index 76c1791..11da943 100644
--- a/README.md
+++ b/README.md
@@ -26,6 +26,7 @@ A lightweight, configurable select box/text input plugin. Similar to Select2 and
     // Passing options (with default options)
     const choices = new Choices(elements, {
         items: [],
+        options: [],
         maxItemCount: -1,
         addItems: true,
         removeItems: true,
@@ -87,8 +88,11 @@ A lightweight, configurable select box/text input plugin. Similar to Select2 and
 
 ## Configuration options
 ### items
-<strong>Type:</strong>  <strong>Default:</strong> `[]`
-<strong>Usage:</strong> Add pre-selected items to input. 
+<strong>Type:</strong> `Array`  <strong>Default:</strong> `[]`
+
+<strong>Usage:</strong> Add pre-selected items to text input. 
+
+<strong>Input types affected:</strong> `text`
 
 Pass an array of strings: 
 
@@ -109,29 +113,63 @@ Pass an array of objects:
 }]
 ```
 
+### options
+<strong>Type:</strong> `Array`  <strong>Default:</strong> `[]`
+
+<strong>Usage:</strong> Add options to select input. 
+
+<strong>Input types affected:</strong> `select-one`, `select-multiple`
+
+Pass an array of objects:
+
+```
+[{ 
+	value: 'Option 1',
+	label: 'Option 1', 
+	selected: true,
+	disabled: false,
+},
+{ 
+	value: 'Option 2',
+	label: 'Option 2', 
+	selected: false,
+	disabled: true,
+}]
+```
+
 ### maxItemCount
 <strong>Type:</strong> `Number` <strong>Default:</strong>`-1`
 
+<strong>Input types affected:</strong> `text`, `select-multiple`
+
 <strong>Usage:</strong> The amount of items a user can input/select ("-1" indicates no limit).
 
 ### addItems
 <strong>Type:</strong> `Boolean` <strong>Default:</strong>`true`
 
+<strong>Input types affected:</strong> `text`
+
 <strong>Usage:</strong> Whether a user can add items to the passed input's value.
 
 ### removeItems
 <strong>Type:</strong> `Boolean` <strong>Default:</strong>`true`
 
+<strong>Input types affected:</strong> `text`, `select-multiple`
+
 <strong>Usage:</strong> Whether a user can remove items (only affects text and multiple select input types).
 
 ### removeButton
 <strong>Type:</strong> `Boolean` <strong>Default:</strong>`false`
 
+<strong>Input types affected:</strong> `text`, `select-multiple`
+
 <strong>Usage:</strong> Whether a button should show that, when clicked, will remove an item (only affects text and multiple select input types).
 
 ### editItems
 <strong>Type:</strong> `Boolean` <strong>Default:</strong>`false`
 
+<strong>Input types affected:</strong> `text`
+
 <strong>Usage:</strong> Whether a user can edit selected items (only affects text input types).
 
 <strong>Usage:</strong> Optionally set an item limit (`-1` indicates no limit).
@@ -139,51 +177,71 @@ Pass an array of objects:
 ### delimiter
 <strong>Type:</strong> `String` <strong>Default:</strong>`,`
 
-<strong>Usage:</strong> What divides each value (only affects text input types).
+<strong>Input types affected:</strong> `text`
+
+<strong>Usage:</strong> What divides each value.
 
 ### duplicates
 <strong>Type:</strong> `Boolean` <strong>Default:</strong>`true`
 
-<strong>Usage:</strong> Whether a user can input a duplicate item (only affects text input types).
+<strong>Input types affected:</strong> `text`
+
+<strong>Usage:</strong> Whether a user can input a duplicate item.
 
 ### paste
 <strong>Type:</strong> `Boolean` <strong>Default:</strong>`true`
 
+<strong>Input types affected:</strong> `text`, `select-multiple`.
+
 <strong>Usage:</strong> Whether a user can paste into the input.
 
 ### search
 <strong>Type:</strong> `Boolean` <strong>Default:</strong>`true`
 
+<strong>Input types affected:</strong> `select-one`, `select-multiple`.
+
 <strong>Usage:</strong> Whether a user can filter options by searching (only affects select input types).
 
 ### regexFilter
 <strong>Type:</strong> `Regex` <strong>Default:</strong>`null`
 
-<strong>Usage:</strong> A filter that will need to pass for a user to successfully add an item (only affects text input types).
+<strong>Input types affected:</strong> `text`
+
+<strong>Usage:</strong> A filter that will need to pass for a user to successfully add an item.
 
 ### placeholder
 <strong>Type:</strong> `Boolean` <strong>Default:</strong>`true`
 
+<strong>Input types affected:</strong> `text`, `select-one`, `select-multiple`
+
 <strong>Usage:</strong> Whether the input should show a placeholder. Used in conjunction with `placeholderValue`. If `placeholder` is set to true and no value is passed to `placeholderValue`, the passed input's placeholder attribute will be used as the  placeholder value.
 
 ### placeholderValue
 <strong>Type:</strong> `String` <strong>Default:</strong>`null`
 
+<strong>Input types affected:</strong> `text`, `select-one`, `select-multiple`
+
 <strong>Usage:</strong> The value of the inputs placeholder.
 
 ### prependValue
 <strong>Type:</strong> `String` <strong>Default:</strong>`null`
 
+<strong>Input types affected:</strong> `text`, `select-one`, `select-multiple`
+
 <strong>Usage:</strong> Prepend a value to each item added to input (only affects text input types).
 
 ### appendValue
 <strong>Type:</strong> `String` <strong>Default:</strong>`null`
 
+<strong>Input types affected:</strong> `text`, `select-one`, `select-multiple`
+
 <strong>Usage:</strong> Append a value to each item added to input (only affects text input types).
 
 ### loadingText
 <strong>Type:</strong> `String` <strong>Default:</strong>`Loading...`
 
+<strong>Input types affected:</strong> `select-one`, `select-multiple`
+
 <strong>Usage:</strong> The loading text that is shown when options are populated via an AJAX callback.
 
 ### classNames
@@ -217,21 +275,29 @@ classNames: {
 }
 ```
 
+<strong>Input types affected:</strong> `text`, `select-one`, `select-multiple`
+
 <strong>Usage:</strong> Classes added to HTML generated by Choices. By default classnames follow the [BEM](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) notation.
 
 ### callbackOnInit
 <strong>Type:</strong> `Function` <strong>Default:</strong>`() => {}`
 
+<strong>Input types affected:</strong> `text`, `select-one`, `select-multiple`
+
 <strong>Usage:</strong> Function to run once Choices initialises.
 
 ### callbackOnAddItem
 <strong>Type:</strong> `Function` <strong>Default:</strong>`(id, value, passedInput) => {}`
 
+<strong>Input types affected:</strong> `text`, `select-one`, `select-multiple`
+
 <strong>Usage:</strong> Function to run each time an item is added.
 
 ### callbackOnRemoveItem
 <strong>Type:</strong> `Function` <strong>Default:</strong>`(id, value, passedInput) => {}`
 
+<strong>Input types affected:</strong> `text`, `select-one`, `select-multiple`
+
 <strong>Usage:</strong> Function to run each time an item is removed.
 
 
@@ -256,54 +322,80 @@ choices.disable();
 ```
 
 ### highlightAll();
+<strong>Input types affected:</strong> `text`, `select-multiple`
+
 <strong>Usage:</strong> Highlight each chosen item (selected items can be removed).
 
 
 ### unhighlightAll();
+<strong>Input types affected:</strong> `text`, `select-multiple`
+
 <strong>Usage:</strong> Un-highlight each chosen item.
 
 
 ### removeItemsByValue(value);
+<strong>Input types affected:</strong> `text`, `select-multiple`
+
 <strong>Usage:</strong> Remove each item by a given value.
 
 
 ### removeActiveItems(excludedId);
+<strong>Input types affected:</strong> `text`, `select-multiple`
+
 <strong>Usage:</strong> Remove each selectable item.
 
 
 ### removeHighlightedItems();
+<strong>Input types affected:</strong> `text`, `select-multiple`
+
 <strong>Usage:</strong> Remove each item the user has selected.
 
 
 ### showDropdown();
+<strong>Input types affected:</strong> `select-one`, `select-multiple`
+
 <strong>Usage:</strong> Show option list dropdown (only affects select inputs).
 
 
 ### hideDropdown();
+<strong>Input types affected:</strong> `text`, `select-multiple`
+
 <strong>Usage:</strong> Hide option list dropdown (only affects select inputs).
 
 
 ### toggleDropdown();
+<strong>Input types affected:</strong> `text`, `select-multiple`
+
 <strong>Usage:</strong> Toggle dropdown between showing/hidden.
 
 
 ### setValue(args);
-<strong>Usage:</strong> Set value of input based on an array of objects or strings. This behaves exactly the same as passing items via the `items` option but can be called after initialising Choices on an text input (only affects text inputs).
+<strong>Input types affected:</strong> `text`
+
+<strong>Usage:</strong> Set value of input based on an array of objects or strings. This behaves exactly the same as passing items via the `items` option but can be called after initialising Choices on an text input.
 
 
 ### clearValue();
+<strong>Input types affected:</strong> `text`
+
 <strong>Usage:</strong> Clear value of input.
 
 
 ### clearInput();
-<strong>Usage:</strong> Clear input of any user inputted text (only affects text inputs).
+<strong>Input types affected:</strong> `text`
+
+<strong>Usage:</strong> Clear input of any user inputted text.
 
 
 ### disable();
+<strong>Input types affected:</strong> `text`, `select-one`, `select-multiple`
+
 <strong>Usage:</strong> Disable input from selecting further options.
 
 
 ### ajax(fn);
+<strong>Input types affected:</strong> `select-one`, `select-multiple`
+
 <strong>Usage:</strong> Populate options via a callback.
 
 
diff --git a/assets/scripts/src/choices.js b/assets/scripts/src/choices.js
index 1276734..38dcdd7 100644
--- a/assets/scripts/src/choices.js
+++ b/assets/scripts/src/choices.js
@@ -26,6 +26,7 @@ export class Choices {
 
         const defaultConfig = {
             items: [],
+            options: [],
             maxItemCount: -1,
             addItems: true,
             removeItems: true,
@@ -90,8 +91,12 @@ export class Choices {
         this.highlightPosition = 0;
         this.canSearch = this.config.search;
 
+        // Assing preset optiosn from passed object
+        this.presetOptions = this.config.options;
+
         // Assign preset items from passed object first
         this.presetItems = this.config.items;
+
         // Then add any values passed from attribute
         if(this.passedElement.value) {
             this.presetItems = this.presetItems.concat(this.passedElement.value.split(this.config.delimiter));
@@ -1261,9 +1266,22 @@ export class Choices {
                 });
             } else {
                 const passedOptions = Array.from(this.passedElement.options);
-                passedOptions.forEach((option) => {
-                    const isDisabled = option.disabled || option.parentNode.disabled;
-                    this._addChoice(option.selected, isDisabled, option.value, option.innerHTML);
+                let allOptions = [];
+
+                // Create array of options from option elements
+                passedOptions.forEach((o) => {
+                    allOptions.push({
+                        value: o.value,
+                        label: o.innerHTML,
+                        selected: o.selected,
+                        disabled: o.disabled || o.parentNode.disabled
+                    });
+                });
+
+                allOptions = allOptions.concat(this.presetOptions);
+
+                allOptions.forEach((o) => {
+                    this._addChoice(o.selected ? o.selected : false, o.disabled ? o.disabled : false, o.value, o.label);
                 });
             }
         } else if(this.passedElement.type === 'text') {
diff --git a/index.html b/index.html
index 838abc9..15ca427 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
 <body>
     <div class="container">
         <div class="section">
-            <h1>Choices</h1>
+<!--             <h1>Choices</h1>
             <p>A lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.</p>
             <h2>Text inputs</h2>
             <label for="choices-1">Limited to 5</label>
@@ -135,93 +135,106 @@
             </select>
 
             <label for="choices-14">Countries remote source</label>
-            <select name="choices-14" id="choices-14" placeholder="Pick a country"></select>
+            <select name="choices-14" id="choices-14" placeholder="Pick a country"></select> -->
+
+            <select name="choices-bug" id="choices-bug" placeholder="This is a placeholder">
+                <option value="0">Zero</option>
+            </select>
         </div>
     </div>
     <script>
         document.addEventListener('DOMContentLoaded', () => {
-            const choices1 = new Choices(document.getElementById('choices-1'), {
-                delimiter: ',',
-                editItems: true,
-                maxItemCount: 5,
-                removeItemButton: true
-            });
+            // const choices1 = new Choices(document.getElementById('choices-1'), {
+            //     delimiter: ',',
+            //     editItems: true,
+            //     maxItemCount: 5,
+            //     removeItemButton: true
+            // });
 
-            const choices2 = new Choices('#choices-2', {
-                paste: false,
-                duplicateItems: false,
-                editItems: true,
-            });
+            // const choices2 = new Choices('#choices-2', {
+            //     paste: false,
+            //     duplicateItems: false,
+            //     editItems: true,
+            // });
 
-            const choices3 = new Choices('#choices-3', {
-                duplicates: false,
-                editItems: true,
-                regexFilter: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
-            });
+            // const choices3 = new Choices('#choices-3', {
+            //     duplicates: false,
+            //     editItems: true,
+            //     regexFilter: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+            // });
 
-            const choices4 = new Choices('#choices-4', {
-                addItems: false,
-                removeItems: false,
-            }).disable();
+            // const choices4 = new Choices('#choices-4', {
+            //     addItems: false,
+            //     removeItems: false,
+            // }).disable();
 
-            const choices5 = new Choices('#choices-5', {
-                prependValue: 'item-',
-                appendValue: `-${Date.now()}`,
-            }).removeActiveItems();
+            // const choices5 = new Choices('#choices-5', {
+            //     prependValue: 'item-',
+            //     appendValue: `-${Date.now()}`,
+            // }).removeActiveItems();
 
-            const choices6 = new Choices('#choices-6', {
-                items: ['josh@joshuajohnson.co.uk', { value: 'joe@bloggs.co.uk', label: 'Joe Bloggs' } ],
-            });
+            // const choices6 = new Choices('#choices-6', {
+            //     items: ['josh@joshuajohnson.co.uk', { value: 'joe@bloggs.co.uk', label: 'Joe Bloggs' } ],
+            // });
 
-            const choices7 = new Choices('#choices-7', { search: false }).setValue(['Set value 1', 'Set value 2']);
+            // const choices7 = new Choices('#choices-7', { search: false }).setValue(['Set value 1', 'Set value 2']);
              
-            const choices10 = new Choices('#choices-10', { 
-                placeholder: true, 
-                placeholderValue: 'Pick an Strokes record',
-                callbackOnRender: (state) => console.log(state)
-            }).ajax((callback) => {
-                fetch('https://api.discogs.com/artists/55980/releases?token=QBRmstCkwXEvCjTclCpumbtNwvVkEzGAdELXyRyW')
-                    .then((response) => {
-                        response.json().then(function(data) {
-                            callback(data.releases, 'title', 'title');
-                        });
-                    })
-                    .catch((error) => {
-                        console.log(error);
-                    });
+            // const choices10 = new Choices('#choices-10', { 
+            //     placeholder: true, 
+            //     placeholderValue: 'Pick an Strokes record',
+            //     callbackOnRender: (state) => console.log(state)
+            // }).ajax((callback) => {
+            //     fetch('https://api.discogs.com/artists/55980/releases?token=QBRmstCkwXEvCjTclCpumbtNwvVkEzGAdELXyRyW')
+            //         .then((response) => {
+            //             response.json().then(function(data) {
+            //                 callback(data.releases, 'title', 'title');
+            //             });
+            //         })
+            //         .catch((error) => {
+            //             console.log(error);
+            //         });
+            // });
+
+            // const choices12 = new Choices('#choices-12', { 
+            //     placeholder: true, 
+            //     placeholderValue: 'Pick an Arctic Monkeys record'
+            // }).ajax((callback) => {
+            //     fetch('https://api.discogs.com/artists/391170/releases?token=QBRmstCkwXEvCjTclCpumbtNwvVkEzGAdELXyRyW')
+            //         .then((response) => {
+            //             response.json().then((data) => {
+            //                 callback(data.releases, 'title', 'title');
+            //             });
+            //         })
+            //         .catch((error) => {
+            //             console.log(error);
+            //         });
+            // });
+
+            // const choices14 = new Choices('#choices-14').ajax((callback) => {
+            //     fetch('https://restcountries.eu/rest/v1/all')
+            //         .then((response) => {
+            //             response.json().then((data) => {
+            //                 callback(data, 'alpha2Code', 'name');
+            //             });
+            //         })
+            //         .catch((error) => {
+            //             console.log(error);
+            //         });
+            // });
+
+            // const choicesMultiple = new Choices('[data-choice]', {
+            //     placeholderValue: 'This is a placeholder set in the config',
+            //     removeButton: true
+            // });
+
+            const choicesBug = new Choices('#choices-bug', {
+                options: [
+                    {value: 'One', label: 'Label One', selected: true, disabled: false},
+                    {value: 'Two', label: 'Label Two'},
+                    {value: 'Three', label: 'Label Three'},
+                ],
             });
 
-            const choices12 = new Choices('#choices-12', { 
-                placeholder: true, 
-                placeholderValue: 'Pick an Arctic Monkeys record'
-            }).ajax((callback) => {
-                fetch('https://api.discogs.com/artists/391170/releases?token=QBRmstCkwXEvCjTclCpumbtNwvVkEzGAdELXyRyW')
-                    .then((response) => {
-                        response.json().then((data) => {
-                            callback(data.releases, 'title', 'title');
-                        });
-                    })
-                    .catch((error) => {
-                        console.log(error);
-                    });
-            });
-
-            const choices14 = new Choices('#choices-14').ajax((callback) => {
-                fetch('https://restcountries.eu/rest/v1/all')
-                    .then((response) => {
-                        response.json().then((data) => {
-                            callback(data, 'alpha2Code', 'name');
-                        });
-                    })
-                    .catch((error) => {
-                        console.log(error);
-                    });
-            });
-
-            const choicesMultiple = new Choices('[data-choice]', {
-                placeholderValue: 'This is a placeholder set in the config',
-                removeButton: true
-            });
         });
     </script>
 </body>