Added emptyOptionLabel, showEmptyOptionInDropdown and selectize-dropdown-emptyoptionlabel class

Author: Anand Phulwani

src/defaults.js

@@ -20,6 +20,8 @@ Selectize.defaults = {
 	selectOnTab: true,
 	preload: false,
 	allowEmptyOption: false,
+	showEmptyOptionInDropdown: false,
+	emptyOptionLabel: '--',
 	closeAfterSelect: false,
 
 	scrollDuration: 60,

src/selectize.jquery.js

@@ -139,6 +139,10 @@ $.fn.selectize = function(settings_user) {
 		if (!placeholder && !settings.allowEmptyOption) {
 			placeholder = $input.children('option[value=""]').text();
 		}
+		if (settings.allowEmptyOption && settings.showEmptyOptionInDropdown && !$input.children('option[value=""]').length) {
+			var input_html = $input.html();
+			$input.html('<option value="">'+settings.emptyOptionLabel+'</option>'+input_html);
+		}
 
 		var settings_element = {
 			'placeholder' : placeholder,

src/selectize.js

@@ -297,6 +297,7 @@ $.extend(Selectize.prototype, {
 	setupTemplates: function() {
 		var self = this;
 		var field_label = self.settings.labelField;
+		var field_value = self.settings.valueField;
 		var field_optgroup = self.settings.optgroupLabelField;
 
 		var templates = {
@@ -307,7 +308,7 @@ $.extend(Selectize.prototype, {
 				return '<div class="optgroup-header">' + escape(data[field_optgroup]) + '</div>';
 			},
 			'option': function(data, escape) {
-				return '<div class="option">' + escape(data[field_label]) + '</div>';
+				return '<div class="option '+( data[field_value] === '' ? 'selectize-dropdown-emptyoptionlabel' : '')+'">' + escape(data[field_label]) + '</div>';
 			},
 			'item': function(data, escape) {
 				return '<div class="item">' + escape(data[field_label]) + '</div>';