jQuery Plugin For Custom Tags Input and Select Box - selectize.js

selectize.js is a useful and lightweight plugin for creating solid and user-friendly tags input field and select list with clean and powerful APIs & Codes. Please check the demo page to see it in action.

For IE 8 support, you should include es5-shim on your web page.

Related plugins:

Basic Usage:

1. Include jQuery library and selectize.js in the head section

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/selectize.js"></script>

2. Include jQuery selectize CSS to style the plugin

<link rel="stylesheet" href="selectize.css">

3. Create a container for the tags input

<input type="text" id="input-tags" class="demo-default" value="awesome,neat">

4. Call the function on the input field to initialize the plugin.

<script>
$('#input-tags').selectize({
options: [],
optgroups: [],
plugins: [],
delimiter: ',',
splitOn: null, // regexp or string for splitting up values from a paste command
persist: true,
diacritics: true,
create: false,
createOnBlur: false,
createFilter: null,
highlight: true,
openOnFocus: true,
maxOptions: 1000,
maxItems: null,
hideSelected: null,
addPrecedence: false,
selectOnTab: false,
preload: false,
allowEmptyOption: false,
closeAfterSelect: false,
scrollDuration: 60,
loadThrottle: 300,
loadingClass: 'loading',
dataAttr: 'data-data',
optgroupField: 'optgroup',
valueField: 'value',
labelField: 'text',
disabledField: 'disabled',
optgroupLabelField: 'label',
optgroupValueField: 'value',
lockOptgroupOrder: false,
sortField: '$order',
searchField: ['text'],
searchConjunction: 'and',
mode: null,
wrapperClass: 'selectize-control',
inputClass: 'selectize-input',
dropdownClass: 'selectize-dropdown',
dropdownContentClass: 'selectize-dropdown-content',
dropdownParent: null,
copyClassesToDropdown: true,
/*
load                 : null, // function(query, callback) { ... }
score                : null, // function(search) { ... }
onInitialize         : null, // function() { ... }
onChange             : null, // function(value) { ... }
onItemAdd            : null, // function(value, $item) { ... }
onItemRemove         : null, // function(value) { ... }
onClear              : null, // function() { ... }
onOptionAdd          : null, // function(value, data) { ... }
onOptionRemove       : null, // function(value) { ... }
onOptionClear        : null, // function() { ... }
onOptionGroupAdd     : null, // function(id, data) { ... }
onOptionGroupRemove  : null, // function(id) { ... }
onOptionGroupClear   : null, // function() { ... }
onDropdownOpen       : null, // function($dropdown) { ... }
onDropdownClose      : null, // function($dropdown) { ... }
onType               : null, // function(str) { ... }
onDelete             : null, // function(values) { ... }
*/
render: {
  /*
  item: null,
  optgroup: null,
  optgroup_header: null,
  option: null,
  option_create: null
  */
}
});
</script>

More examples:

• Basic Example
• Examples of how to interact with the control programmatically
• Contact Lists Example
• Customizing Appearance Example
• Dynamic Example
• Example of integrating third-party data, loaded asynchronously.
• Performs Example

Change Logs:

v0.12.5 (2018-06-28)

• Allow the dropdown to reopen on click if it is closed without losing focus by closeAfterSelect: true
• Fixed bug making clearOptions function. Now it doesn't remove already selected options.
• New feature: allow to disable single options or complete optgroups

v0.12.4 (2016-12-07)

• added a new feature which allows to disable single options or complete optgroups

v0.12.4 (2016-10-13)

v0.12.3 (2016-08-25)

• Make label[for] work after applying Selectize 
• Output friendly error message when Microplguin is missing.
• Add local server command grunt server.
• Stop creating items automatically when text is pasted, only create them when pasted text contains delimiter.
• Fix regression 'Required fields can not be focusable' in Chrome
• Fix detection of Validity API, we had false negatives before.
• Fix open keyboard bug under iOS after closing selection
• Fix highlighting more than one character 

v0.12.2 (2016-06-24)

• Fix issue preventing build ("Cannot assign to read only property 'subarray'") because of bug in uglifyjs.
• Fix tabbing issue on IE11.
• Fix jQuery initialization for jQuery >= 1.9
• Make remove_button work for single-option usage
• Fixed bug that made allowEmptyOption: true useless
• Functions in option render can now return a DOM node in addition to text

2016-01-03

• Released 0.12.1.
• Functions in option render can now return a DOM node in addition to text.

2015-01-30

• update+bugfix

v0.11.2 (2014-09-25)

• update.

v0.11.0 (2014-08-02)

• update.

v0.10.1 (2014-06-03)

• update.

v0.9.1 (2014-05-01)

• update.

v0.9.0 (2014-03-21)

• update.

v0.8.5 (2013-11-25)

• Fixed build script.

v0.8.4 (2013-11-15)

• Added "createOnBlur" option.

v0.8.3 (2013-11-13)

• Fix for initially-selected item not reappearing in dropdown after another option is selected (cache).

v0.8.2 (2013-11-03)

• Fix for "change" event being fired when value doesn't change
• Retain focus on ESC + close when already-selected option clicked ("single" mode)

v0.8.1 (2013-10-17)

• Fixed the destroy() method so that it restores original options, optgroups, and tabindex that existed originally before running Selectize

v0.8.0 (2013-10-13)

• Added right-to-left (RTL) environment support.
• Added multi-property sorting (with configurable direction per field).
• Added "required" attribute handling. Thanks to @sjhewitt.
• Added support for the same option in multiple optgroups.
• Improved width handling of inner textbox when leading/trailing whitespace is present. Thanks to @jacquelinewheeler.
• Clicking the control when focused now toggles the dropdown when in single mode.
• Highlight selected item in dropdown on focus.
• Added "searchConjunction" setting to allow multiple search terms to be joined by an "and" or "or" operator.
• Added "addPrecedence" setting to allow the "Add..." item to be selected by default when in create mode.
• Fixed bug causing "remove_button" and "drag_drop" plugins to still be usable when control is locked/disabled.
• Disabled native browser autocomplete on control.

v0.7.7 (2013-09-17)

• Fixed addOptionGroup method

v0.7.5 (2013-09-09)

• fixed typo

v0.7.3 (2013-08-31)

• Added jQuery to deps.

v0.7.2 (2013-08-28)

• Fix for .form-control style conflicts
• Only fire "change" DOM event once. 

v0.7.0 (2013-08-25)

• Simplified addOption() to no longer require "value" to be explicitly declared.

v0.6.14 (2013-08-06)

• bugs fix

This awesome jQuery plugin is developed by selectize. For more Advanced Usages, please check the demo page or visit the official website.