clear_button plugin

Author: Koloto

examples/plugins.html

@@ -48,6 +48,25 @@ <h2>Plugin: "remove_button"</h2>
 				</script>
 			</div>
 
+			<div class="demo">
+				<h2>Plugin: "clear_button"</h2>
+				<div class="control-group">
+					<label for="input-clear">Tags:</label>
+					<input type="text" id="input-clear" class="input-clear demo-default" value="awesome,neat">
+				</div>
+				<div class="control-group">
+					<label for="input-clear-disable">Tags:</label>
+					<input type="text" disabled id="input-clear-disable" class="input-clear demo-default" value="awesome,neat">
+				</div>
+				<script>
+				$('.input-clear').selectize({
+					plugins: ['clear_button'],
+					persist: false,
+					create: true
+				});
+				</script>
+			</div>
+
 			<div class="demo">
 				<h2>Plugin: "restore_on_backspace"</h2>
 				<div class="control-group">

src/plugins/clear_button/plugin.js

@@ -0,0 +1,52 @@
+/**
+ * Plugin: "clear_button" (selectize.js)
+ * Copyright (c) 2017 Alexey Kolotovchenkov & contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
+ * file except in compliance with the License. You may obtain a copy of the License at:
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
+ * ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ *
+ * @author Alexey Kolotovchenkov <[email protected]>
+ */
+
+Selectize.define('clear_button', function(options) {
+	var self = this;
+
+	options = $.extend({
+		label     : '&times;',
+		title     : 'Clear',
+		className : 'clear'
+	}, options);
+
+	self.setup = (function() {
+		var original = self.setup;
+		return function() {
+			original.apply(self, arguments);
+
+			var html = '<a href="javascript:void(0)" class="' + options.className + '" tabindex="-1" title="' + escape_html(options.title) + '">' + options.label + '</a>';
+
+			self.$control.append(html);
+
+			// add event listener
+			self.$control
+				.on('mousedown', 'a.' + options.className, function(e) {
+					// prevent toggling
+					e.preventDefault();
+					e.stopPropagation();
+				})
+				.on('click', 'a.' + options.className, function(e) {
+					e.preventDefault();
+					e.stopPropagation();
+					if (self.isLocked) return;
+
+					self.clear();
+					self.close();
+				});
+		};
+	})();
+});

src/plugins/clear_button/plugin.less

@@ -0,0 +1,37 @@
+.selectize-control.plugin-clear_button {
+  &.single .selectize-input:after {
+    content: none;
+  }
+
+  .clear {
+    display: none;
+    position: absolute;
+    top: @selectize-padding-y;
+    right: @selectize-padding-item-x;
+    font-size: 1.5em;
+    padding: @selectize-padding-item-y @selectize-padding-item-x;
+    color: @selectize-color-border;
+    outline: 0;
+
+    &:hover {
+      color: @selectize-color-text;
+    }
+  }
+
+  .selectize-input.has-items {
+    .clear {
+      display: inline-block;
+    }
+  }
+
+  .disabled {
+    .clear {
+      color: @selectize-color-border;
+    }
+  }
+
+  &.single .selectize-input.has-items,
+  &.multi  .selectize-input.has-items {
+    padding-right: @selectize-padding-x + 2*@selectize-padding-item-x;
+  }
+}

src/selectize.js

@@ -1811,7 +1811,7 @@ $.extend(Selectize.prototype, {
 		var self = this;
 
 		if (!self.items.length) return;
-		self.$control.children(':not(input)').remove();
+		self.$control.children('[data-value]').remove();
 		self.items = [];
 		self.lastQuery = null;
 		self.setCaret(0);