Allow the users to type in selectize single selects.

examples/plugins.html

@@ -113,6 +113,35 @@ <h2>Plugin: "dropdown_header"</h2>
 				})
 				</script>
 			</div>
+
+			<div class="demo">
+				<h2>Plugin: "typing_mode"</h2>
+				<div class="control-group">
+					<label for="select-language">Languages:</label>
+					<select id="select-language" placeholder="Select a language...">
+						<option value="txt">Text</option>
+						<option value="md">Markdown</option>
+						<option value="html">HTML</option>
+						<option value="php">PHP</option>
+						<option value="python">Python</option>
+						<option value="java">Java</option>
+						<option value="js">JavaScript</option>
+						<option value="ruby">Ruby</option>
+						<option value="vhdl">VHDL</option>
+						<option value="verilog">Verilog</option>
+						<option value="c#">C#</option>
+						<option value="c++">C/C++</option>
+					</select>
+				</div>
+
+				<script>
+				$('#select-language').selectize({
+					plugins: ['typing_mode'],
+					persist: false,
+					create: true
+				});
+				</script>
+			</div>
 		</div>
 	</body>
 </html>

src/plugins/typing_mode/plugin.js

@@ -0,0 +1,35 @@
+Selectize.define('typing_mode', function(options) {
+	var self = this;
+
+	this.setup = (function() {
+		var original = self.setup;
+
+		return function() {
+			original.apply(this, arguments);
+
+			this.on('dropdown_open', function() {
+				self.typingValue = self.typingValue || self.getValue()
+				var option = self.getOption(self.typingValue);
+
+				self.$control_input.attr('placeholder', option.text().trim());
+				self.$control_input.css({
+					opacity: '1',
+					width: '100%',
+					position: 'relative'
+				});
+				self.$control.find('.item').hide();
+
+				self.items = [];
+				self.setCaret(0);
+			});
+
+			this.on('change', function() {
+				self.typingValue = self.getValue();
+			});
+
+			this.$control_input.on('blur', function() {
+				self.setValue(self.typingValue);
+			});
+		};
+	})();
+});