Crude initial implementation of #76.

selectize · Sep 17, 2013 · f704c25 · f704c25
1 parent c0f3b46
commit f704c25
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 11 deletions.
diff --git a/examples/optgroups.html b/examples/optgroups.html
@@ -61,6 +61,29 @@ <h2>Optgroups (basic)</h2>
 				</script>
 			</div>
 
+			<div class="demo">
+				<h2>Optgroups (repeated options)</h2>
+				<div class="control-group">
+					<label for="select-repeated-options">Options:</label>
+					<select id="select-repeated-options" class="demo-default" multiple>
+						<option value="">Select...</option>
+						<optgroup label="Group 1">
+							<option value="a">Item A</option>
+							<option value="b">Item B</option>
+						</optgroup>
+						<optgroup label="Group 2">
+							<option value="a">Item A</option>
+							<option value="b">Item B</option>
+						</optgroup>
+					</select>
+				</div>
+				<script>
+				$('#select-repeated-options').selectize({
+					sortField: 'text'
+				});
+				</script>
+			</div>
+
 			<div class="demo">
 				<h2>Optgroups (programmatic)</h2>
 				<div class="control-group">

diff --git a/src/selectize.jquery.js b/src/selectize.jquery.js
@@ -35,6 +35,8 @@ $.fn.selectize = function(settings) {
 		var i, n, tagName;
 		var $children;
 		var order = 0;
+		var options = settings_element.options;
+
 		settings_element.maxItems = !!$input.attr('multiple') ? null : 1;
 
 		var readData = function($el) {
@@ -53,14 +55,31 @@ $.fn.selectize = function(settings) {
 			value = $option.attr('value') || '';
 			if (!value.length) return;
 
+			// if the option already exists, it's probably been
+			// duplicated in another optgroup. in this case, push
+			// the current group to the "optgroup" property on the
+			// existing option so that it's rendered in both places.
+			if (options.hasOwnProperty(value)) {
+				if (group) {
+					if (!options[value].optgroup) {
+						options[value].optgroup = group;
+					} else if (!$.isArray(options[value].optgroup)) {
+						options[value].optgroup = [options[value].optgroup, group];
+					} else {
+						options[value].optgroup.push(group);
+					}
+				}
+				return;
+			}
+
 			option = readData($option) || {
 				'text'     : $option.text(),
 				'value'    : value,
 				'optgroup' : group
 			};
 
 			option.$order = ++order;
-			settings_element.options[value] = option;
+			options[value] = option;
 
 			if ($option.is(':selected')) {
 				settings_element.items.push(value);

diff --git a/src/selectize.js b/src/selectize.js
@@ -844,7 +844,7 @@ $.extend(Selectize.prototype, {
 		}
 
 		var self = this;
-		var i, n, groups, groups_order, option, optgroup, html, html_children;
+		var i, j, k, n, groups, groups_order, option, option_html, optgroup, optgroups, html, html_children;
 		var hasCreateOption;
 		var query = self.$control_input.val();
 		var results = self.search(query);
@@ -870,16 +870,22 @@ $.extend(Selectize.prototype, {
 		}
 
 		for (i = 0; i < n; i++) {
-			option = self.options[results.items[i].id];
-			optgroup = option[self.settings.optgroupField] || '';
-			if (!self.optgroups.hasOwnProperty(optgroup)) {
-				optgroup = '';
-			}
-			if (!groups.hasOwnProperty(optgroup)) {
-				groups[optgroup] = [];
-				groups_order.push(optgroup);
+			option      = self.options[results.items[i].id];
+			option_html = self.render('option', option);
+			optgroup    = option[self.settings.optgroupField] || '';
+			optgroups   = $.isArray(optgroup) ? optgroup : [optgroup];
+
+			for (j = 0, k = optgroups && optgroups.length; j < k; j++) {
+				optgroup = optgroups[j];
+				if (!self.optgroups.hasOwnProperty(optgroup)) {
+					optgroup = '';
+				}
+				if (!groups.hasOwnProperty(optgroup)) {
+					groups[optgroup] = [];
+					groups_order.push(optgroup);
+				}
+				groups[optgroup].push(option_html);
 			}
-			groups[optgroup].push(self.render('option', option));
 		}
 
 		// render optgroup headers & join groups