Added "allowEmptyOption" option (selectize#163).

aag-peace · Aug 1, 2014 · c8f2944 · c8f2944
1 parent 6a071a2
commit c8f2944
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 10 deletions.
diff --git a/docs/usage.md b/docs/usage.md
@@ -91,6 +91,12 @@ $(function() {
 		<td valign="top"><code>boolean</code></td>
 		<td valign="top"><code>false</code></td>
 	</tr>
+	<tr>
+		<td valign="top"><code>allowEmptyOption</code></td>
+		<td valign="top">If true, Selectize will treat any options with a "" value like normal. This defaults to false to accomodate the common &lt;select&gt; practice of having the first empty option act as a placeholder.</td>
+		<td valign="top"><code>boolean</code></td>
+		<td valign="top"><code>false</code></td>
+	</tr>
 	<tr>
 		<td valign="top"><code>scrollDuration</code></td>
 		<td valign="top">The animation duration (in milliseconds) of the scroll animation triggered when going [up] and [down] in the options dropdown.</td>

diff --git a/examples/basic.html b/examples/basic.html
@@ -59,6 +59,26 @@ <h2>&lt;select&gt;</h2>
 				</script>
 			</div>
 
+			<div class="demo">
+				<h2>&lt;select&gt; (allow empty)</h2>
+				<div class="control-group">
+					<label for="select-beast-empty">Beast:</label>
+					<select id="select-beast-empty" class="demo-default" data-placeholder="Select a person...">
+						<option value="">None</option>
+						<option value="4">Thomas Edison</option>
+						<option value="1">Nikola</option>
+						<option value="3">Nikola Tesla</option>
+						<option value="5">Arnold Schwarzenegger</option>
+					</select>
+				</div>
+				<script>
+				$('#select-beast-empty').selectize({
+					allowEmptyOption: true,
+					create: true
+				});
+				</script>
+			</div>
+
 			<div class="demo">
 				<h2>&lt;select&gt; (disabled)</h2>
 				<div class="control-group">

diff --git a/src/defaults.js b/src/defaults.js
@@ -15,6 +15,7 @@ Selectize.defaults = {
 	addPrecedence: false,
 	selectOnTab: false,
 	preload: false,
+	allowEmptyOption: false,
 
 	scrollDuration: 60,
 	loadThrottle: 300,

diff --git a/src/selectize.jquery.js b/src/selectize.jquery.js
@@ -16,7 +16,7 @@ $.fn.selectize = function(settings_user) {
 	 */
 	var init_textbox = function($input, settings_element) {
 		var i, n, values, option, value = $.trim($input.val() || '');
-		if (!value.length) return;
+		if (!settings.allowEmptyOption && !value.length) return;
 
 		values = value.split(settings.delimiter);
 		for (i = 0, n = values.length; i < n; i++) {
@@ -54,7 +54,7 @@ $.fn.selectize = function(settings_user) {
 			$option = $($option);
 
 			value = $option.attr('value') || '';
-			if (!value.length) return;
+			if (!value.length && !settings.allowEmptyOption) return;
 
 			// if the option already exists, it's probably been
 			// duplicated in another optgroup. in this case, push
@@ -124,8 +124,13 @@ $.fn.selectize = function(settings_user) {
 		var instance;
 		var $input = $(this);
 		var tag_name = this.tagName.toLowerCase();
+		var placeholder = $input.attr('placeholder') || $input.attr('data-placeholder');
+		if (!placeholder && !settings.allowEmptyOption) {
+			placeholder = $input.children('option[value=""]').text();
+		}
+
 		var settings_element = {
-			'placeholder' : $input.children('option[value=""]').text() || $input.attr('placeholder'),
+			'placeholder' : placeholder,
 			'options'     : {},
 			'optgroups'   : {},
 			'items'       : []

diff --git a/src/selectize.js b/src/selectize.js
@@ -619,7 +619,7 @@ $.extend(Selectize.prototype, {
 			self.createItem();
 		} else {
 			value = $target.attr('data-value');
-			if (value) {
+			if (typeof value !== 'undefined') {
 				self.lastQuery = null;
 				self.setTextboxValue('');
 				self.addItem(value);
@@ -1110,7 +1110,7 @@ $.extend(Selectize.prototype, {
 		}
 
 		value = hash_key(data[self.settings.valueField]);
-		if (!value || self.options.hasOwnProperty(value)) return;
+		if (typeof value !== 'string' || self.options.hasOwnProperty(value)) return;
 
 		self.userOptions[value] = true;
 		self.options[value] = data;
@@ -1147,8 +1147,9 @@ $.extend(Selectize.prototype, {
 		value_new = hash_key(data[self.settings.valueField]);
 
 		// sanity checks
+		if (value === null) return;
 		if (!self.options.hasOwnProperty(value)) return;
-		if (!value_new) throw new Error('Value must be set in option data');
+		if (typeof value_new !== 'string') throw new Error('Value must be set in option data');
 
 		// update references
 		if (value_new !== value) {
@@ -1260,7 +1261,7 @@ $.extend(Selectize.prototype, {
 	getElementWithValue: function(value, $els) {
 		value = hash_key(value);
 
-		if (value) {
+		if (typeof value !== 'undefined' && value !== null) {
 			for (var i = 0, n = $els.length; i < n; i++) {
 				if ($els[i].getAttribute('data-value') === value) {
 					return $($els[i]);
@@ -1426,7 +1427,7 @@ $.extend(Selectize.prototype, {
 
 			if (!data || typeof data !== 'object') return;
 			var value = hash_key(data[self.settings.valueField]);
-			if (!value) return;
+			if (typeof value !== 'string') return;
 
 			self.setTextboxValue('');
 			self.addOption(data);

diff --git a/src/utils.js b/src/utils.js
@@ -22,10 +22,10 @@ var isset = function(object) {
  *   1         -> '1'
  *
  * @param {string} value
- * @returns {string}
+ * @returns {string|null}
  */
 var hash_key = function(value) {
-	if (typeof value === 'undefined' || value === null) return '';
+	if (typeof value === 'undefined' || value === null) return null;
 	if (typeof value === 'boolean') return value ? '1' : '0';
 	return value + '';
 };