jQuery Plugin For Customized Tags Enter and Choose Field – selectize.js

selectize.js is a helpful and light-weight plugin for creating strong and user-friendly tags enter area and choose listing with clear and highly effective APIs & Codes.

Additionally appropriate with the newest Bootstrap 5/4/3 framework.

Please test the demo web page to see it in motion.

For IE 8 assist, it’s best to embody es5-shim in your net web page.

See Additionally:

Fundamental Utilization:

1. Embrace jQuery library and selectize.js within the head part

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

2. Embrace jQuery selectize CSS to model the plugin

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

3. Create a container for the tags enter

<enter kind="textual content" id="input-tags" class="demo-default" worth="superior,neat">

4. Name the operate on the enter area to initialize the plugin.

$('#input-tags').selectize({

  // An array of the preliminary choices out there to pick; array of objects. 
  // By default that is populated from the unique enter ingredient. 
  // In case your ingredient is a <choose> with <possibility>s specified this property will get populated mechanically. 
  // Setting this property is handy when you've got your knowledge as an array and wish to mechanically generate the <possibility>s.
  choices: [],

  // Preliminary chosen values.
  objects: []

  // Possibility teams that choices might be bucketed into. 
  // In case your ingredient is a <choose> with <optgroup>s this property will get populated mechanically. 
  // Make certain every object within the array has a property named no matter optgroupValueField is about to.
  optgroups: [],

  // Customized delimiter character to separate objects
  delimiter: ',',
  splitOn: null, // regexp or string for splitting up values from a paste command

  // If false, objects created by the consumer is not going to present up as out there choices as soon as they're unselected.
  persist: true,

  // Allow or disable worldwide character assist.
  diacritics: true,

  // Permits the consumer to create new objects that are not within the preliminary listing of choices. 
  // This setting may be any of the next: true, false (disabled), or a operate to course of enter. 
  // The operate can take certainly one of two varieties: synchronous (with signature operate(enter){} or asynchronous (with signature operate(enter, callback). 
  // Within the synchronous case, the operate ought to return an object for the choices (eg, with defaults: return { 'worth': worth, 'textual content': textual content };). 
  // The asynchronous model ought to invoke the callback with the lead to the identical format as the article above (eg, callback( { 'worth': worth, 'textual content': textual content});)
  create: false,

  // If true, when consumer exits the sphere (clicks exterior of enter), a brand new possibility is created and chosen (if create setting is enabled).
  createOnBlur: false,

  // Specifies a RegExp or a string containing a daily expression that the present search filter should match to be allowed to be created. 
  // May be a predicate operate that takes the filter textual content and returns whether or not it's allowed.
  createFilter: null,

  // Toggles match highlighting inside the dropdown menu.
  spotlight: true,

  // Present the dropdown instantly when the management receives focus.
  openOnFocus: true,

  // The max variety of objects to render directly within the dropdown listing of choices.
  maxOptions: 1000,

  // The max variety of objects the consumer can choose. Null permits an infinite variety of objects
  maxItems: 1,

  // If true, the objects which can be at the moment chosen is not going to be proven within the dropdown listing of accessible choices.
  hideSelected: false,

  // If true, the "Add..." possibility is the default choice within the dropdown.
  addPrecedence: false,

  // If true, the tab key will select the at the moment chosen merchandise.
  selectOnTab: false,

  // If true, the load operate might be known as upon management initialization (with an empty search). Alternatively it may be set to 'focus' to name the load operate when management receives focus.
  preload: false,

  // Permits empty choices.
  allowEmptyOption: false,

  // If true, the dropdown might be closed after a range is made.
  closeAfterSelect: false,

  // The animation period (in milliseconds) of the scroll animation triggered when going [up] and [down] within the choices dropdown.
  scrollDuration: 60,

  // The variety of milliseconds to attend earlier than requesting choices from the server or null. 
  // If null, throttling is disabled. Helpful when loading choices dynamically whereas the consumer sorts a search / filter expression.
  loadThrottle: 300,

  // The category title added to the wrapper ingredient whereas awaiting the success of load requests.
  loadingClass: 'loading',

  // The placeholder of the management (displayed when nothing is chosen / typed). 
  // Defaults to enter ingredient's placeholder, except this one is specified.
  placeholder: undefined,

  // The <possibility> attribute from which to learn JSON knowledge concerning the possibility.
  dataAttr: 'data-data',

  // The title of the property to group objects by.
  optgroupField: 'optgroup',

  // The title of the property to make use of as the worth when an merchandise is chosen.
  valueField: 'worth',

  // The title of the property to render as an possibility / merchandise label (not wanted when customized rendering features are outlined).
  labelField: 'textual content',

  // The title of the property to disabled possibility and optgroup.
  disabledField: 'disabled',

  // The title of the property to render as an possibility group label (not wanted when customized rendering features are outlined).
  optgroupLabelField: 'label',

  // The title of the choice group property that serves as its distinctive identifier.
  optgroupValueField: 'worth',

  // If truthy, Selectize will make all optgroups be in the identical order as they have been added (by the `$order` property). 
  // In any other case, it can order primarily based on the rating of the leads to every.
  lockOptgroupOrder: false,

  // A single area or an array of fields to type by. 
  // Every merchandise within the array must be an object containing a minimum of a area property. 
  // Optionally, path may be set to 'asc' or 'desc'. 
  // The order of the array defines the kind priority.
  sortField: '$order',

  // An array of property names to investigate when filtering choices.
  searchField: ['text'],

  // When trying to find a number of phrases (separated by area), that is the operator used. Could be 'and' or 'or' .
  searchConjunction: 'and',

  // multi or single
  mode: null,

  // Default courses
  wrapperClass: 'selectize-control',
  inputClass: 'selectize-input',
  dropdownClass: 'selectize-dropdown',
  dropdownContentClass: 'selectize-dropdown-content',

  // The ingredient the dropdown menu is appended to. This must be 'physique' or null. If null, the dropdown might be appended as a baby of the Selectize management.
  dropdownParent: null,

  // Copy the unique enter courses to the dropdown ingredient.
  copyClassesToDropdown: true,

  //  Customized rendering features. Every operate ought to settle for two arguments: knowledge and escape and return HTML (string or DOM ingredient) with a single root ingredient. 
  // The escape argument is a operate that takes a string and escapes all particular HTML characters. This is essential to make use of to stop XSS vulnerabilities.
  render: {
    /*
    merchandise: null,
    optgroup: null,
    optgroup_header: null,
    possibility: null,
    option_create: null
    */
  }

});

5. Callback features.

load                 : null, // operate(question, callback) { ... }
rating                : null, // operate(search) { ... }
onInitialize         : null, // operate() { ... }
onChange             : null, // operate(worth) { ... }
onItemAdd            : null, // operate(worth, $merchandise) { ... }
onItemRemove         : null, // operate(worth) { ... }
onClear              : null, // operate() { ... }
onOptionAdd          : null, // operate(worth, knowledge) { ... }
onOptionRemove       : null, // operate(worth) { ... }
onOptionClear        : null, // operate() { ... }
onOptionGroupAdd     : null, // operate(id, knowledge) { ... }
onOptionGroupRemove  : null, // operate(id) { ... }
onOptionGroupClear   : null, // operate() { ... }
onDropdownOpen       : null, // operate($dropdown) { ... }
onDropdownClose      : null, // operate($dropdown) { ... }
onType               : null, // operate(str) { ... }
onDelete             : null, // operate(values) { ... }

6. API strategies.

// initialize the Selectize management
var $choose = $('#input-tags').selectize(choices);
// fetch the occasion
var selectize = $choose[0].selectize;

// add choices, string or array
selectize.addOption(knowledge);

// update choices
selectize.updateOption(worth, knowledge)

// take away an possibility
selectize.removeOption(worth);

// clear choices
selectize.clearOptions(silent);

// get choices
selectize.getOption(worth)

// retrieve the jQuery ingredient for the earlier or subsequent possibility, relative to the at the moment highlighted possibility
// the path argument must be 1 for "subsequent" or -1 for "earlier"
selectize.getAdjacentOption(worth, path);

// refresh choices
selectize.refreshOptions(triggerDropdown);

// clear all chosen objects
selectize.clear(silent);

// get merchandise
selectize.getItem(worth);

// add an merchandise
selectize.addItem(worth, silent);

// take away an merchandise
selectize.removeItem(worth, silent);

// create a brand new merchandise
selectize.createItem(worth, [triggerDropdown], [callback]);

// refresh objects
selectize.refreshItems();

// add a brand new optgroup
selectize.addOptionGroup(id, knowledge);

// take away a optgroup
selectize.removeOptionGroup(id);

// clear all optgroups
selectize.clearOptionGroups();

// open the autocomplete dropdown
selectize.open();

// shut the autocomplete dropdown
selectize.shut();

// re-position the autocomplete dropdown
selectize.positionDropdown();

// destroy the instnace
selectize.destroy();

// load choices
selectize.load(fn)

// concentrate on the management
selectize.focus();

// transfer the main focus out of the management
selectize.blur();

// lock/unlock the management
selectize.lock();
selectize.unlock();

// disable/allow consumer enter
selectize.disable();
selectize.allow();

// get the worth of the management
selectize.getValue();

// set the chosen objects
selectize.setValue(worth, silent);

// set the chosen merchandise
selectize.setActiveItem($merchandise, e);

// reset the variety of max objects to the given worth
selectize.setMaxItems(worth);

// transfer the caret to the required place
selectize.setCaret(index);

// test if is reaching the restrict
selectize.isFull();

// clear cache
selectize.clearCache(template);

// replace place holder
selectize.updatePlaceholder();

// add an occasion listener
selectize.on(occasion, handler);

// take away an occasion listener
selectize.off(occasion, handler);

// take away all occasion listeners
selectize.off(occasion);

// set off occasion listeners
selectize.set off(occasion, ...);

7. Occasions.

selectize.on('initialize', operate(){
  // do one thing
});

selectize.on('focus', operate(){
  // do one thing
});

selectize.on('blur', operate(){
  // do one thing
});

selectize.on('clear', operate(){
  // do one thing
});

selectize.on('option_clear', operate(){
  // do one thing
});

selectize.on('optgroup_clear', operate(){
  // do one thing
});

selectize.on('destroy', operate(){
  // do one thing
});

selectize.on('change', operate(worth){
  // do one thing
});

selectize.on('item_add', operate(worth, $merchandise){
  // do one thing
});

selectize.on('item_remove', operate(worth, $merchandise){
  // do one thing
});

selectize.on('option_add', operate(worth, knowledge){
  // do one thing
});

selectize.on('option_remove', operate(worth){
  // do one thing
});

selectize.on('optgroup_add', operate(id, knowledge){
  // do one thing
});

selectize.on('optgroup_remove', operate(id){
  // do one thing
});

selectize.on('dropdown_open', operate($dropdown){
  // do one thing
});

selectize.on('dropdown_close', operate($dropdown){
  // do one thing
});

selectize.on('kind', operate(str){
  // do one thing
});

selectize.on('load', operate(knowledge){
  // do one thing
});

Extra examples:

Changelog:

v0.13.7 (2022-09-16)

• Fastened lacking model for dropdown_header plugin
• Fastened Scroll left when clicking on a selectized merchandise and web page is scrolled proper

v0.13.6 (2022-07-10)

• Use navigator.userAgentData for platform detection when out there
• Use right semver syntax for JQuery peerDependency
• Repair bootstrap3 select-width-item-border incompatible worth
• Repair typo
• Utilizing utility/xhtml+xml leads to ‘invalid or unlawful string

v0.13.4 (2022-02-06)

• Repair lacking px unit on $select-width-item-border.

v0.13.3 (2022-01-28)

• replace deps. add bootstrap 5 assist
• bugfix

v0.13.3 (2021-06-05)

v0.13.2 (2020-12-01)

• added warning when getSelection can not discover enter management
• added occasion ‘item_before_remove’ simply earlier than merchandise is eliminated

v0.13.0 (2020-12-01)

v0.13.0 (2020-11-19)

• updating sass implementation. compressing css information on construct

v0.13.0 (2020-11-04)

• Assist for Bootstrap v4.x
• Including SASS types, LESS types nonetheless out there for bootstrap 2.x
• Fastened bug for placeholder textual content clipping
• Fastened bug for take away button plugin closing bootstrap modals
• Including silent choice to clearOptions operate

v0.12.6 (2018-07-13)

v0.12.5 (2018-06-28)

• Enable the dropdown to reopen on click on whether it is closed with out shedding focus by closeAfterSelect: true
• Fastened bug making clearOptions operate. Now it would not take away already chosen choices.
• New characteristic: enable to disable single choices or full optgroups

v0.12.4 (2016-12-07)

• added a brand new characteristic which permits to disable single choices or full optgroups

v0.12.4 (2016-10-13)

v0.12.3 (2016-08-25)

• Make label[for] work after making use of Selectize 
• Output pleasant error message when Microplguin is lacking.
• Add native server command grunt server.
• Cease creating objects mechanically when textual content is pasted, solely create them when pasted textual content accommodates delimiter.
• Repair regression ‘Required fields cannot be focusable’ in Chrome
• Repair detection of Validity API, we had false negatives earlier than.
• Repair open keyboard bug underneath iOS after closing choice
• Repair highlighting multiple character 

v0.12.2 (2016-06-24)

• Repair concern stopping construct (“Can not assign to learn solely property ‘subarray'”) due to bug in uglifyjs.
• Repair tabbing concern on IE11.
• Repair jQuery initialization for jQuery >= 1.9
• Make remove_button work for single-option utilization
• Fastened bug that made allowEmptyOption: true ineffective
• Capabilities in possibility render can now return a DOM node along with textual content

2016-01-03

• Launched 0.12.1.
• Capabilities in possibility render can now return a DOM node along with textual content.

2015-01-30

v0.11.2 (2014-09-25)

v0.11.0 (2014-08-02)

v0.10.1 (2014-06-03)

v0.9.1 (2014-05-01)

v0.9.0 (2014-03-21)

v0.8.5 (2013-11-25)

v0.8.4 (2013-11-15)

• Added “createOnBlur” possibility.

v0.8.3 (2013-11-13)

• Repair for initially-selected merchandise not reappearing in dropdown after another choice is chosen (cache).

v0.8.2 (2013-11-03)

• Repair for “change” occasion being fired when worth would not change
• Retain concentrate on ESC + shut when already-selected possibility clicked (“single” mode)

v0.8.1 (2013-10-17)

• Fastened the destroy() methodology in order that it restores authentic choices, optgroups, and tabindex that existed initially earlier than operating Selectize

v0.8.0 (2013-10-13)

• Added right-to-left (RTL) surroundings assist.
• Added multi-property sorting (with configurable path per area).
• Added “required” attribute dealing with. Because of @sjhewitt.
• Added assist for a similar possibility in a number of optgroups.
• Improved width dealing with of interior textbox when main/trailing whitespace is current. Because of @jacquelinewheeler.
• Clicking the management when targeted now toggles the dropdown when in single mode.
• Spotlight chosen merchandise in dropdown on focus.
• Added “searchConjunction” setting to permit a number of search phrases to be joined by an “and” or “or” operator.
• Added “addPrecedence” setting to permit the “Add…” merchandise to be chosen by default when in create mode.
• Fastened bug inflicting “remove_button” and “drag_drop” plugins to nonetheless be usable when management is locked/disabled.
• Disabled native browser autocomplete on management.

v0.7.7 (2013-09-17)

• Fastened addOptionGroup methodology

v0.7.5 (2013-09-09)

v0.7.3 (2013-08-31)

v0.7.2 (2013-08-28)

• Repair for .form-control model conflicts
• Solely hearth “change” DOM occasion as soon as. 

v0.7.0 (2013-08-25)

• Simplified addOption() to now not require “worth” to be explicitly declared.

v0.6.14 (2013-08-06)

This superior jQuery plugin is developed by selectize. For extra Superior Usages, please test the demo web page or go to the official web site.