Dynamic option group/optgroup implementation

CHANGELOG.md

@@ -1,6 +1,10 @@
 <!-- Feel free to put either your handle and/or full name, according to
      your privacy needs -->
 
+*  New feature: dynamically add option groups
+
+   *@jackbentley*
+
 ## v0.13.0 · 03 11 2020
 
 * Support for Bootstrap v4.x.

docs/usage.md

@@ -246,6 +246,15 @@ $(function() {
 		<td valign="top"><code>array</code></td>
 		<td valign="top"><code>[]</code></td>
 	</tr>
+	<tr>
+		<td valign="top"><code>optgroupRegister</code></td>
+		<td valign="top">
+			Dynamically register an option group. Return value should
+			be false or same format as an <code>optgroups</code> obeject.
+		</td>
+		<td valign="top"><code>function</code></td>
+		<td valign="top"><code>null</code></td>
+	</tr>
 	<tr>
 		<td valign="top"><code>dataAttr</code></td>
 		<td valign="top">The &lt;option&gt; attribute from which to read JSON data about the option.</td>

examples/optgroups.html

@@ -151,6 +151,46 @@ <h2>Optgroups (programmatic)</h2>
 				</script>
 			</div>
 
+			<div class="demo">
+				<h2>Optgroups (dynamic)</h2>
+				<div class="control-group">
+					<label for="select-console">Console:</label>
+					<select id="select-console" class="demo-consoles" placeholder="Select console..."></select>
+				</div>
+				<script>
+				$('#select-console').selectize({
+					options: [
+						{manufacturer: 'nintendo', value: "nes", name: "Nintendo Entertainment System"},
+						{manufacturer: 'nintendo', value: "snes", name: "Super Nintendo Entertainment System"},
+						{manufacturer: 'nintendo', value: "n64", name: "Nintendo 64"},
+						{manufacturer: 'nintendo', value: "gamecube", name: "GameCube"},
+						{manufacturer: 'nintendo', value: "wii", name: "Wii"},
+                        {manufacturer: 'nintendo', value: "wiiu", name: "Wii U"},
+						{manufacturer: 'sony', value: 'ps1', name: 'PlayStation'},
+						{manufacturer: 'sony', value: 'ps2', name: 'PlayStation 2'},
+						{manufacturer: 'sony', value: 'ps3', name: 'PlayStation 3'},
+						{manufacturer: 'sony', value: 'ps4', name: 'PlayStation 4'},
+						{manufacturer: 'microsoft', value: 'xbox', name: 'Xbox'},
+						{manufacturer: 'microsoft', value: '360', name: 'Xbox 360'},
+						{manufacturer: 'microsoft', value: 'xbone', name: 'Xbox One'}
+					],
+					optgroupRegister: function (optgroup) {
+						var capitalised = optgroup.charAt(0).toUpperCase() + optgroup.substring(1);
+						var group = {
+							label: 'Manufacturer: ' + capitalised
+						};
+
+						group[this.settings.optgroupValueField] = optgroup;
+
+						return group;
+					},
+					optgroupField: 'manufacturer',
+					labelField: 'name',
+					searchField: ['name']
+				});
+				</script>
+			</div>
+
 			<div class="demo">
 				<h2>Plugin: "optgroup_columns"</h2>
 				<div class="control-group" id="select-car-group">

src/defaults.js

@@ -38,6 +38,9 @@ Selectize.defaults = {
 	optgroupLabelField: 'label',
 	optgroupValueField: 'value',
 	lockOptgroupOrder: false,
+	/*
+	optgroupRegister: null, // function(optgroup) { ... }
+	*/
 
 	sortField: '$order',
 	searchField: ['text'],

src/selectize.js

@@ -1127,6 +1127,12 @@ $.extend(Selectize.prototype, {
 
 			for (j = 0, k = optgroups && optgroups.length; j < k; j++) {
 				optgroup = optgroups[j];
+				if (!self.optgroups.hasOwnProperty(optgroup) && typeof self.settings.optgroupRegister === 'function') {
+					var regGroup;
+					if (regGroup = self.settings.optgroupRegister.apply(self, [optgroup])) {
+						self.registerOptionGroup(regGroup);
+					}
+				}
 				if (!self.optgroups.hasOwnProperty(optgroup)) {
 					optgroup = '';
 				}

test/setup.js

@@ -97,6 +97,29 @@
 					'Group 2': {label: 'Group 2', val: 'Group 2', $order: 4, dis: false}
 				}, '2');
 			});
+			it('should register optgroups if optgroupRegister is set', function() {
+				var test = setup_test('<select>', {
+					options: [
+						{value: 'a', grp: 'someGroup'},
+						{value: 'b', grp: 'anotherGroup'},
+						{value: 'c', grp: 'anotherGroup'}
+					],
+					optgroupValueField: 'val',
+					optgroupField: 'grp',
+					optgroupRegister: function (optgroup) {
+						var group = {};
+						group['label'] = optgroup;
+						group['val'] = optgroup;
+
+						return group;
+					}
+				});
+				test.selectize.refreshOptions();
+				assert.deepEqual(test.selectize.optgroups, {
+					'someGroup': {label: 'someGroup', val: 'someGroup', $order: 4},
+					'anotherGroup': {label: 'anotherGroup', val: 'anotherGroup', $order: 5}
+				}, '2');
+			});
 			it('should allow respect disabled flags of option and optgroup', function() {
 				var test = setup_test(['<select>',
 					'<optgroup label="Group 1">',