
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.
- Publication date: 28.06.2018
- Source