Merge PR #617

Author: joallard

CHANGELOG.md

@@ -0,0 +1,2 @@
+* Functions in option `render` can now return a DOM node in addition to
+  text. (#617)

docs/usage.md

@@ -365,7 +365,9 @@ $(function() {
 	<tr>
 		<td valign="top"><code>render</code></td>
 		<td valign="top">
-			Custom rendering functions. Each function should accept two arguments: "data" and "escape" and return HTML (string) with a single root element.
+			Custom rendering functions. Each function should accept two
+			arguments: "data" and "escape" and return HTML (string or
+			DOM element) with a single root element.
 			The "escape" argument is a function that takes a string and escapes all special HTML characters.
 			This is very important to use to prevent XSS vulnerabilities.
             <table width="100%">

src/selectize.js

@@ -1060,10 +1060,10 @@ $.extend(Selectize.prototype, {
 					optgroup = '';
 				}
 				if (!groups.hasOwnProperty(optgroup)) {
-					groups[optgroup] = [];
+					groups[optgroup] = document.createDocumentFragment();
 					groups_order.push(optgroup);
 				}
-				groups[optgroup].push(option_html);
+				groups[optgroup].appendChild(option_html);
 			}
 		}
 
@@ -1077,23 +1077,26 @@ $.extend(Selectize.prototype, {
 		}
 
 		// render optgroup headers & join groups
-		html = [];
+		html = document.createDocumentFragment();
 		for (i = 0, n = groups_order.length; i < n; i++) {
 			optgroup = groups_order[i];
-			if (self.optgroups.hasOwnProperty(optgroup) && groups[optgroup].length) {
+			if (self.optgroups.hasOwnProperty(optgroup) && groups[optgroup].childNodes.length) {
 				// render the optgroup header and options within it,
 				// then pass it to the wrapper template
-				html_children = self.render('optgroup_header', self.optgroups[optgroup]) || '';
-				html_children += groups[optgroup].join('');
-				html.push(self.render('optgroup', $.extend({}, self.optgroups[optgroup], {
-					html: html_children
+				html_children = document.createDocumentFragment();
+				html_children.appendChild(self.render('optgroup_header', self.optgroups[optgroup]));
+				html_children.appendChild(groups[optgroup]);
+
+				html.appendChild(self.render('optgroup', $.extend({}, self.optgroups[optgroup], {
+					html: domToString(html_children),
+					dom:  html_children
 				})));
 			} else {
-				html.push(groups[optgroup].join(''));
+				html.appendChild(groups[optgroup]);
 			}
 		}
 
-		$dropdown_content.html(html.join(''));
+		$dropdown_content.html(html);
 
 		// highlight matching terms inline
 		if (self.settings.highlight && results.query.length && results.tokens.length) {
@@ -2044,26 +2047,26 @@ $.extend(Selectize.prototype, {
 		}
 
 		// render markup
-		html = self.settings.render[templateName].apply(this, [data, escape_html]);
+		html = $(self.settings.render[templateName].apply(this, [data, escape_html]));
 
 		// add mandatory attributes
 		if (templateName === 'option' || templateName === 'option_create') {
-			html = html.replace(regex_tag, '<$1 data-selectable');
+			html.attr('data-selectable', '');
 		}
-		if (templateName === 'optgroup') {
+		else if (templateName === 'optgroup') {
 			id = data[self.settings.optgroupValueField] || '';
-			html = html.replace(regex_tag, '<$1 data-group="' + escape_replace(escape_html(id)) + '"');
+			html.attr('data-group', id);
 		}
 		if (templateName === 'option' || templateName === 'item') {
-			html = html.replace(regex_tag, '<$1 data-value="' + escape_replace(escape_html(value || '')) + '"');
+			html.attr('data-value', value || '');
 		}
 
 		// update cache
 		if (cache) {
-			self.renderCache[templateName][value] = html;
+			self.renderCache[templateName][value] = html[0];
 		}
 
-		return html;
+		return html[0];
 	},
 
 	/**

src/utils.js

@@ -322,4 +322,12 @@ var autoGrow = function($input) {
 
 	$input.on('keydown keyup update blur', update);
 	update();
-};
+};
+
+var domToString = function(d) {
+	var tmp = document.createElement('div');
+
+	tmp.appendChild(d.cloneNode(true));
+
+	return tmp.innerHTML;
+};

test/setup.js

@@ -278,6 +278,63 @@
 			});
 		});
 
+		describe('<select> (custom string render)', function() {
+			var test;
+
+			beforeEach(function() {
+				test = setup_test('<select>' +
+					'<option value="">Select an option...</option>' +
+					'<option value="a">A</option>' +
+				'</select>', {
+					render: {
+						option: function(item, escape) {
+							return '<div class="option custom-option">' + escape(item.text) + '</div>'
+						}
+					}
+				});
+			});
+
+			it('should render the custom option element', function(done) {
+				test.selectize.focus();
+
+				window.setTimeout(function() {
+					expect(test.selectize.$dropdown.find('.custom-option').length).to.be.equal(1);
+					done();
+				}, 5);
+			});
+		});
+
+		describe('<select> (custom dom render)', function() {
+			var test;
+
+			beforeEach(function() {
+				test = setup_test('<select>' +
+					'<option value="">Select an option...</option>' +
+					'<option value="a">A</option>' +
+				'</select>', {
+					render: {
+						option: function(item, escape) {
+							var div = document.createElement('div');
+
+							div.className = 'option custom-option';
+							div.innerHTML = escape(item.text);
+
+							return div;
+						}
+					}
+				});
+			});
+
+			it('should render the custom option element', function(done) {
+				test.selectize.focus();
+
+				window.setTimeout(function() {
+					expect(test.selectize.$dropdown_content.find('.custom-option').length).to.be.equal(1);
+					done();
+				}, 0);
+			});
+		});
+
 	});
 
 })();