selectize.js是一个有用且轻量级的插件,用于创建坚实且用户友好的标签输入字段和选择列表,并具有干净强大的API和代码。
还与最新的Bootstrap 5/4/3框架兼容。
请查看演示页面以查看它的实际操作。
对于IE 8的支持,你应该在你的网页上包括es5垫片。
1.在head部分包含jQuery库和selectize.js
<script src="/path/to/jquery.min.js"></script> <script src="/path/to/selectize.js"></script>
2.包含jQuery selectize CSS来设计插件的样式
<link rel="stylesheet" href="selectize.css">
3.为标签输入创建一个容器
<input type="text" id="input-tags" class="demo-default" value="awesome,neat">
4.调用输入字段上的函数来初始化插件。
$('#input-tags').selectize({ // An array of the initial options available to select; array of objects. // By default this is populated from the original input element. // If your element is a <select> with <option>s specified this property gets populated automatically. // Setting this property is convenient if you have your data as an array and want to automatically generate the <option>s. options: [], // Initial selected values. items: [] // Option groups that options will be bucketed into. // If your element is a <select> with <optgroup>s this property gets populated automatically. // Make sure each object in the array has a property named whatever optgroupValueField is set to. optgroups: [], // Custom delimiter character to separate items delimiter: ',', // All plugins live in their own folders in "src/plugins". plugins: [], // regexp or string for splitting up values from a paste command splitOn: null, // If false, items created by the user will not show up as available options once they are unselected. persist: true, // Enable or disable international character support. diacritics: true, // Allows the user to create new items that aren't in the initial list of options. // This setting can be any of the following: true, false (disabled), or a function to process input. // The function can take one of two forms: synchronous (with signature function(input){} or asynchronous (with signature function(input, callback). // In the synchronous case, the function should return an object for the options (eg, with defaults: return { 'value': value, 'text': text };). // The asynchronous version should invoke the callback with the result in the same format as the object above (eg, callback( { 'value': value, 'text': text});) create: false, // If true, when user exits the field (clicks outside of input), a new option is created and selected (if create setting is enabled). createOnBlur: false, // Specifies a RegExp or a string containing a regular expression that the current search filter must match to be allowed to be created. // May also be a predicate function that takes the filter text and returns whether it is allowed. createFilter: null, // Toggles match highlighting within the dropdown menu. highlight: true, // Show the dropdown immediately when the control receives focus. openOnFocus: true, // The max number of items to render at once in the dropdown list of options. maxOptions: 1000, // The max number of items the user can select. Null allows an unlimited number of items maxItems: 1, // If true, the items that are currently selected will not be shown in the dropdown list of available options. hideSelected: false, // If true, the "Add..." option is the default selection in the dropdown. addPrecedence: false, // If true, the tab key will choose the currently selected item. selectOnTab: false, // If true, the load function will be called upon control initialization (with an empty search). Alternatively it can be set to 'focus' to call the load function when control receives focus. preload: false, // Allows empty options. allowEmptyOption: false, // Shows empty option in the dropdown showEmptyOptionInDropdown: false, // Label for empty option emptyOptionLabel: '--', // Enable setting the first option in the list as active. setFirstOptionActive: false, // If true, the dropdown will be closed after a selection is made. closeAfterSelect: false, // in ms closeDropdownThreshold: 250, // The animation duration (in milliseconds) of the scroll animation triggered when going [up] and [down] in the options dropdown. scrollDuration: 60, // The number of milliseconds to wait before requesting options from the server or null. // If null, throttling is disabled. Useful when loading options dynamically while the user types a search / filter expression. loadThrottle: 300, // or 'top' deselectBehavior: 'previous', // The class name added to the wrapper element while awaiting the fulfillment of load requests. loadingClass: 'loading', // The number of milliseconds to wait before requesting options from the server or null. // If null, throttling is disabled. Useful when loading options dynamically while the user types a search / filter expression. loadThrottle: 300, // The placeholder of the control (displayed when nothing is selected / typed). // Defaults to input element's placeholder, unless this one is specified. placeholder: undefined, // The <option> attribute from which to read JSON data about the option. dataAttr: 'data-data', // The name of the property to group items by. optgroupField: 'optgroup', // The name of the property to use as the value when an item is selected. valueField: 'value', // The name of the property to render as an option / item label (not needed when custom rendering functions are defined). labelField: 'text', // The name of the property to disabled option and optgroup. disabledField: 'disabled', // The name of the property to render as an option group label (not needed when custom rendering functions are defined). optgroupLabelField: 'label', // The name of the option group property that serves as its unique identifier. optgroupValueField: 'value', // If truthy, Selectize will make all optgroups be in the same order as they were added (by the `$order` property). // Otherwise, it will order based on the score of the results in each. lockOptgroupOrder: false, // A single field or an array of fields to sort by. // Each item in the array should be an object containing at least a field property. // Optionally, direction can be set to 'asc' or 'desc'. // The order of the array defines the sort precedence. sortField: '$order', // An array of property names to analyze when filtering options. searchField: ['text'], // When searching for multiple terms (separated by space), this is the operator used. Can be 'and' or 'or' . searchConjunction: 'and', // multi or single mode: null, // Default classes wrapperClass: 'selectize-control', inputClass: 'selectize-input', dropdownClass: 'selectize-dropdown', dropdownContentClass: 'selectize-dropdown-content', // The element the dropdown menu is appended to. This should be 'body' or null. If null, the dropdown will be appended as a child of the Selectize control. dropdownParent: null, // Copy the original input classes to the dropdown element. copyClassesToDropdown: true, // Custom rendering functions. Each function should accept two arguments: data and escape and return HTML (string or DOM element) with a single root element. // The escape argument is a function that takes a string and escapes all special HTML characters. This is very important to use to prevent XSS vulnerabilities. render: { /* item: null, optgroup: null, optgroup_header: null, option: null, option_create: null */ } });
5.回调函数。
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) { ... }
6.API方法。
// initialize the Selectize control var $select = $('#input-tags').selectize(options); // fetch the instance var selectize = $select[0].selectize; // add options, string or array selectize.addOption(data); // update options selectize.updateOption(value, data) // remove an option selectize.removeOption(value); // clear options selectize.clearOptions(silent); // get options selectize.getOption(value) // retrieve the jQuery element for the previous or next option, relative to the currently highlighted option // the direction argument should be 1 for "next" or -1 for "previous" selectize.getAdjacentOption(value, direction); // refresh options selectize.refreshOptions(triggerDropdown); // clear all selected items selectize.clear(silent); // get item selectize.getItem(value); // add an item selectize.addItem(value, silent); // remove an item selectize.removeItem(value, silent); // create a new item selectize.createItem(value, [triggerDropdown], [callback]); // refresh items selectize.refreshItems(); // add a new optgroup selectize.addOptionGroup(id, data); // remove a optgroup selectize.removeOptionGroup(id); // clear all optgroups selectize.clearOptionGroups(); // open the autocomplete dropdown selectize.open(); // close the autocomplete dropdown selectize.close(); // re-position the autocomplete dropdown selectize.positionDropdown(); // destroy the instnace selectize.destroy(); // load options selectize.load(fn) // focus on the control selectize.focus(); // move the focus out of the control selectize.blur(); // lock/unlock the control selectize.lock(); selectize.unlock(); // disable/enable user input selectize.disable(); selectize.enable(); // get the value of the control selectize.getValue(); // set the selected items selectize.setValue(value, silent); // set the selected item selectize.setActiveItem($item, e); // reset the number of max items to the given value selectize.setMaxItems(value); // move the caret to the specified position selectize.setCaret(index); // check if is reaching the limit selectize.isFull(); // clear cache selectize.clearCache(template); // update place holder selectize.updatePlaceholder(); // add an event listener selectize.on(event, handler); // remove an event listener selectize.off(event, handler); // remove all event listeners selectize.off(event); // trigger event listeners selectize.trigger(event, ...);
7.事件。
selectize.on('initialize', function(){ // do something }); selectize.on('focus', function(){ // do something }); selectize.on('blur', function(){ // do something }); selectize.on('clear', function(){ // do something }); selectize.on('option_clear', function(){ // do something }); selectize.on('optgroup_clear', function(){ // do something }); selectize.on('destroy', function(){ // do something }); selectize.on('change', function(value){ // do something }); selectize.on('item_add', function(value, $item){ // do something }); selectize.on('item_remove', function(value, $item){ // do something }); selectize.on('option_add', function(value, data){ // do something }); selectize.on('option_remove', function(value){ // do something }); selectize.on('optgroup_add', function(id, data){ // do something }); selectize.on('optgroup_remove', function(id){ // do something }); selectize.on('dropdown_open', function($dropdown){ // do something }); selectize.on('dropdown_close', function($dropdown){ // do something }); selectize.on('type', function(str){ // do something }); selectize.on('load', function(data){ // do something });
版本0.15.2(2023-01-07)
版本0.15.1(2022-11-18)
版本0.15.0(2022-11-15)
版本0.14.0(2022-10-03)
版本0.13.7(2022-09-23)
版本0.13.6(2022-07-10)
版本0.13.4(2022-02-06)
版本0.13.3(2022-01-28)
v0.13.3 (2021-06-05)
版本0.13.2(2020-12-01)
版本0.13.0(2020-12-01)
版本0.13.0(2020-11-19)
版本0.13.0(2020-11-04)
版本0.12.6(2018-07-13)
版本0.12.5(2018-06-28)
版本0.12.4(2016-12-07)
版本0.12.4(2016年10月13日)
版本0.12.3(2016年8月25日)
版本0.12.2(2016年6月24日)
2016-01-03
2015-01-30
版本0.11.2(2014-09-25)
版本0.11.0(2014-08-02)
版本0.10.1(2014-06-03)
v0.9.1 (2014-05-01)
v0.9.0 (2014-03-21)
v0.8.5 (2013-11-25)
版本0.8.4(2013-11-15)
v0.8.3(2013年11月13日)
版本0.8.2(2013-11-03)
版本0.8.1(2013-10-17)
v0.8.0(2013年10月13日)
版本0.7.7(2013-09-17)
v0.7.5 (2013-09-09)
v0.7.3(2013年8月31日)
版本0.7.2(2013-08-28)
v0.7.0(2013年8月25日)
版本0.6.14(2013-08-06)