Handle optgroups - initial foundation work

assets/scripts/src/choices.js

@@ -123,12 +123,14 @@ export class Choices {
 
         // Handle select all 
         if (ctrlDown && e.keyCode === 65) {
+            if(this.list && this.list.children) {
                 for (let i = 0; i < this.list.children.length; i++) {
                     let listItem = this.list.children[i];
 
                     listItem.classList.add('is-selected');
                 }
             }
+        }
 
         // Handle enter key
         if (e.keyCode === 13 && e.target.value) {
@@ -224,26 +226,13 @@ export class Choices {
     }
 
     /* Methods */
+    setValue() {}
 
-    setPlaceholder() {
+    getValue() {}
 
-    }
+    getValues() {}
 
-    setValue() {
+    getPlaceholder() {}
-
-    }
-
-    getValue() {
-
-    }
-
-    getPlaceholder() {
-
-    }
-
-    search() {
-
-    }
 
     updateInputValue(value) {
         if (this.options.debug) console.debug('Update input value');
@@ -298,6 +287,16 @@ export class Choices {
     }
 
     renderTextInput() {
+        // Template:
+        // 
+        // <div class="choices choices--active">
+        //     <div class="choices__inner">
+        //         <input id="1" type="text" data-choice="" class="choices__input choices__input--hidden" tabindex="-1" style="display:none;" aria-hidden="true">
+        //         <ul class="choices__list choices__list--items"></ul>
+        //         <input type="text" class="choices__input choices__input--cloned">
+        //     </div>
+        // </div>
+
         let containerOuter = document.createElement('div');
         containerOuter.className = 'choices choices--active';
 
@@ -383,13 +382,21 @@ export class Choices {
         this.list = null;
         this.options = options;
 
-        let initialOptions = this.element.options;
+        let initialOptions = this.element.children;
 
         if (initialOptions) {
-            // Add any preset values
             for (let i = 0; i < initialOptions.length; i++) {
-                let option = initialOptions[i];
+                let parentOption = initialOptions[i];
-                this.addItem(this.options, option.innerHTML);
+        
+                if(parentOption.tagName === 'OPTGROUP') {
+                    this.addItem(this.options, parentOption.label);
+                    for (let j = 0; j < parentOption.children.length; j++) {
+                        let childOption = parentOption.children[j];
+                        this.addItem(this.options, childOption.innerHTML);
+                    }
+                } else if(parentOption.tagName === 'OPTION') {
+                    this.addItem(this.options, parentOption.innerHTML);
+                }
             }
         }
 
@@ -397,6 +404,10 @@ export class Choices {
         this.addEventListeners(this.input);
     }
 
+    renderMultipleSelectInput() {
+
+    }
+
     render() {
         if (this.options.debug) console.debug('Render');
 
@@ -408,7 +419,7 @@ export class Choices {
                 this.renderSelectInput();
                 break;
             case "select-multiple":
-                console.warn('Choices does not support multiple select boxes');
+                this.renderMultipleSelectInput();
                 break;
             default:
                 rthis.renderTextInput();
@@ -429,6 +440,7 @@ export class Choices {
     let input1 = document.getElementById(1);
     let input2 = document.getElementById(2);
     let input3 = document.getElementById(3);
+    let input4 = document.getElementById(4);
 
     let choices1 = new Choices({
         element : input1,
@@ -445,4 +457,9 @@ export class Choices {
     let choices3 = new Choices({
         element : input3
     });
+
+
+    let choices4 = new Choices({
+        element : input4
+    });
 })();

index.html

@@ -22,6 +22,19 @@
         <option value="Value 6">Value 6</option>
     </select>
 
+    <select id="4" name="4" data-choice>
+        <optgroup label="Group 1">
+            <option value="Value 1">Value 1</option>
+            <option value="Value 2">Value 2</option>
+            <option value="Value 3">Value 3</option>
+        </optgroup>
+        <optgroup label="Group 2">
+            <option value="Value 4">Value 4</option>
+            <option value="Value 5">Value 5</option>
+            <option value="Value 6">Value 6</option>
+        </optgroup>
+    </select>
+
 <!--     <label for="4">Multiple select input with two options</label>
     <select id="4" name="4" data-choice multiple>
         <option value="Value 1">Value 1</option>