Powerful Single & Multiple Select Library – tail.select

Category: Form , Javascript | January 15, 2024
Views Total:442 views
Official Page:Go to website
Last Update:January 15, 2024


Powerful Single & Multiple Select Library – tail.select


tail.select is a rewritten version of the jQuery tail.select plugin that can be used to beautify & enhance the default select box with no dependency.

Main features:

  • Supports both single and multiple selection.
  • Live search.
  • 5 themes.
  • Supports grouped options.
  • Adds custom descriptions to options.
  • Allows you to move the selected options to another element.
  • Useful options and API.

Basic usage:

1. Install & download

$ npm install tail.select --save

2. Import the tail.select’s JavaScript and Stylesheet.

<!-- Default Themes -->
<link rel="stylesheet" href="css/default/tail.select-dark-feather.min.css" />
<link rel="stylesheet" href="css/default/tail.select-dark.min.css" />
<link rel="stylesheet" href="css/default/tail.select-light-feather.min.css" />
<link rel="stylesheet" href="css/default/tail.select-light.min.css" />
<!-- Modern Themes -->
<link rel="stylesheet" href="css/modern/tail.select-dark-feather.min.css" />
<link rel="stylesheet" href="css/modern/tail.select-dark.min.css" />
<link rel="stylesheet" href="css/modern/tail.select-light-feather.min.css" />
<link rel="stylesheet" href="css/modern/tail.select-light.min.css" />
<!-- Bootstrap themes -->
<link rel="stylesheet" href="css/bootstrap4/tail.select-THEME-NAME.min.css" />
<link rel="stylesheet" href="css/bootstrap3/tail.select-THEME-NAME.min.css" />
<link rel="stylesheet" href="css/bootstrap2/tail.select-THEME-NAME.min.css" />
<!-- Core JavaScript -->
<script src="js/tail.select.min.js"></script>
<!-- Languages -->
<script src="langs/tail.select-de.js"></script>
<script src="langs/tail.select-es.js"></script>
<script src="langs/tail.select-fi.js"></script>
<script src="langs/tail.select-fr.js"></script>
<script src="langs/tail.select-it.js"></script>
<script src="langs/tail.select-no.js"></script>
<script src="langs/tail.select-pt_BR.js"></script>
<script src="langs/tail.select-ru.js"></script>
<script src="langs/tail.select-tr.js"></script>

3. Initialize the tail.select on an existing select box.

<select id="example" class="example" multiple>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>

4. Config the tail.select by passing the options object as the second parameter to the select function.

  // width/heigh of the select
  width: null,
  height: 350,
  // CSS classes of the select
  classNames: null,
  // custom placeholder
  placeholder: null,
  // allows to deselect options or not
  deselect: false,
  // sets the 'disabled' attribute of the respective tail.select instance and gets overwritten by the source select element during the initialization
  disabled: false,
  // enables animations
  animate: false,
  // determines where to place the select
  openAbove: null,
  // stays open
  stayOpen: false,
  // opens the select on init
  startOpen: false,
  // enables multiple selection
  multiple: false,
  // maximum number of options allowed to select
  multiLimit: Infinity,
  // pins selected options on the top of the dropdown list.
  multiPinSelected: false, 
  // shows a counter
  multiShowCount: true,
  // shows the number of selectable options next to the counter number
  multiShowLimit: false,   
  // allows you to move selected options to another element
  multiContainer:     false,
  // shows "Select All" / "Unselect All" buttons
  multiSelectAll: false,
  // shows "All" / "None" buttons on each Optgroup
  multiSelectGroup: true,
  // enables descriptions for options
  descriptions: false,
  // additonal options
  items: {},
  // set / change the localization / language
  locale: "en",
  linguisticRules: {
    "е": "ё",
    "a": "ä",
    "o": "ö",
    "u": "ü",
    "ss": "ß"
  // 'ASC', 'DESC', or custom function
  sortItems: false,
  // 'ASC', 'DESC', or custom function
  sortGroups: false,
  // set an event listener to the source select element
  sourceBind: false,
  // set the display: none styling, to the source select element.
  sourceHide: true, 
  // enables live search
  search: false,
  searcgConfig: [
    "text", "value"
  // auto sets the focus
  searchFocus: true,
  // highlights matched options
  searchMarked: true,
  searchMinLength: 1,  
  // allows to exclude disabled options on the search
  searchDisabled: true,
  // hide options
  hideSelect: true,
  // hides selected options
  hideSelected: false,
  // hides disabled options
  hideDisabled: false,
  // sets an event listener to the source select element
  bindSourceSelect:   false,
  // enables CSV output
  csvOutput: false,
  csvSeparator: ","
  // function(item , group , search <string|false>){}
  cbLoopItem: undefined,
  // function(label , search <string|false>){}
  cbLoopGroup: undefined,
  // gets fired every time when the .init() process of the tail.select instance has been finished / reached the end
  cbComplete: undefined,
  // gets fired every time when the Dropdown List gets rendered with no single option
  cbEmpty: undefined

5. API methods.

// opens the dropdown
instance.open(animate <undefined|false>);
// closes the dropdown
instance.close(animate <undefined|false>);
// toggles the dropdown
instance.toggle(animate <undefined|false>);
// enables the dropdown
instance.enable(animate <undefined|false>);
// disables the dropdown
instance.disable(animate <undefined|false>);
// remove
// reload
// sets options
instance.config(config <undefined|string>, value <*>);
// event
instance.on(event <string>, callback <callback>, args <undefined|array>);
// search the select
instance.query(search, conf);
// update info
// get the respective option
instance.options.get(key, group);
// set options
instance.options.set(option, rebuild);
// add options
instance.options.add(key, value, group, selected, disabled, description, rebuild);
// move an option
instance.options.move(item, group, new_group, rebuild);
// remove an option
instance.options.remove(key, group, rebuild);
// check if the passed option has the respective state
instance.options.is(state, key, group);
// change the state (first argument) on the passed option
instance.options.handle(state, key, group, _force);
// enable an option
instance.options.enable(key, group);
// disable an option
instance.options.disable(key, group);
// select an option
instance.options.select(key, group);
// unselect an option
instance.options.unselect(key, group);
// toggle an option
instance.options.toggle(key, group);
// invert state
// apply the passed state to all options
instance.options.all(state, group);
// apply a state function to multiple items
instance.options.walk(state, items, args);
// search through the option and return each one
instance.options.finder(search, config);
// return the search result as object
instance.options.find(search, config);
// loop each single option of the instance
instance.options.walker(orderi, orderg);

6. Events.

instance.on('open', function(){
instance.on('close', function(){
instance.on('change', function(item, state){


v1.0.2 (01/15/2024)

  • update

v1.0.0 (12/14/2021)

  • refactor

v0.5.23 (12/13/2021)

  • Fix “Undefined ‘key'” error
  • Add getAll and removeAll methods to options object

v0.5.22 (10/25/2021)

  • Add option deselect using the ENTER key
  • Add Romanian (RO) translation
  • Add Greek (GR) translation

v0.5.21 (05/25/2021)

  • Remove CSS mappings
  • Remove Bootstrap themes
  • Fix Safari issue with unselectable input field
  • Started cleaning up the code and assessing ES6 migration
  • Started implementing CSS variables

v0.5.20 (05/07/2021)

  • Add .label-count--selected class to count when count is higher than 0.
  • Add a reset function to restore a tail.select instance to the state it had when created. The built-in reload function only clears the underlying select element and rebuilds itself, leaving the actual instance in memory. Doing a repeated reload on the same select element lead to tail.select not picking up the selected option from the select anymore.
  • Transfer title attribute from option tag to tail.select entry.

v0.5.16 (07/25/2019)

  • Bugfix: IE doesn’t recognize Object.constructor() as object (instead as function).

v0.5.15 (07/24/2019)

  • Update: Differentiate .disabled and .hover colors.
  • Support for hidden options
  • Bugfix: Typo in searchConfig option key.
  • Bugfix: Missing minified JavaScript files.
  • Bugfix: Some Less styling issues.
  • Bugfix: Using this.rebuild instead of rebuild in the .config() method.
  • Bugfix: Using the olf method ._replaceTypo on the .invert() method (options class).
  • Bugfix: The .query() method doesn’t handle false as item return [ES6 only].
  • Bugfix: Bootstrap 4 Theme Icon Issue in Chrome.

v0.5.14 (07/09/2019)

  • Hotfix: Unable to select options with apostrophes.

v0.5.13 (07/08/2019)

  • Add: The new public method .value() to get the current selected option value(s).
  • Add: Allow to change the minimum search length with the new searchMinLength option.
  • Add: A new public .applyLinguisticRules() method on the options class.
  • Update: A new search function, configurable with searchConfig.
  • Update: Using window on the main factory function (required for Webpack / VueJS).
  • Update: The internal helper methods cHAS(), cADD() and cREM().
  • Bugs fixed.
  • CSS Changes.

v0.5.12 (05/21/2019)

  • Info: This is the first version, which drops IE 9 support!
  • Add: Support for module exporting, tested with browserify.
  • Add: New german linguistic rules for ä, ö, ü and ß.
  • Add: The new browser package variable pointing to js/tail.select-full.js.
  • Update: Using classList to add / remove / check class names.
  • Update: Using Object.assign only to merge / clone object properties.
  • Rename: The internal tailSelect variable has been renamed into select.
  • Rename: The internal tailOptions variable has been renamed into options.
  • Remove: Support for Internet Explorer 9.
  • Bugfix: Add correct file to the main bower variable.
  • Bugfix: Add correct file to the jsdelivr package variable.

v0.5.11 (05/04/2019)

  • Add: The new Turkish Translation.
  • Add: Support for tabindex (using Tab to move from input field to input field).
  • Add: Key-Support for Space to open the current focused select field.
  • Bugfix: Replace classnames with an Space to prevent missing space between class names.

v0.5.10 (04/18/2019)

  • Add: The new Itlaian Translation.
  • Add: The new Norwegish Translation.

v0.5.9 (03/26/2019)

  • Add: The new experimental linguisticRules options, which allows to regex letters, which are (used) similiar.
  • Update: [ES6] Changed the last var variables into let.

v0.5.8 (03/26/2019)

  • Add: The new RussianTranslation.
  • Add: Allow callback functions as strings to allow a deeper translation.
  • Add: The new internal method _e, which handles the translations.

v0.5.7 (03/20/2019)

  • Info: It isn’t longer possible to get an option using the internal option number!
  • Remove: The internal-Array storage has been completely removed.
  • Bugfix: The .remove() method on the options hasn’t worked on the internal-Array storage.
  • Bugfix: The ECMAScript 6 Version returns an Array, while the default version does not.
  • Bugfix: TypeError: Cannot convert undefined or null to object.
  • Bugfix: Remove default options sorting.

v0.5.6 (01/31/2019)

  • Add: The new Brazilian Portuguese Translation.

v0.5.5 (12/23/2018)

  • Add: The new searchDisabled option, which allows to exclude disabled options on the search.
  • Update: The .finder() method depends now on the .find() method.
  • Bugfix: Wrong Version Number on the main object.
  • Bugfix: Options floats over the dropdown field.
  • Bugfix: Terrible performance of search when descriptions included
  • Bugfix: Search functionality hangs exponentially when regular expression matches against larger source options.

v0.5.4 (12/09/2018)

  • Add: The new modify() method on the string Storage to change the strings globally.
  • Update: The .register() method checks now if locale is a string and object a object.
  • Update: The .register() method returns now true on success and false on failure!
  • Bugfix: ES6 The “Select All” Button doesn’t work on Search (All options gets selected).
  • Bugfix: Z-Index CSS Styling bug (:hover).
  • Bugfix: Unnecessary Scrollbar (during a wrong calculation of the dropdown field).
  • Bugfix: “Select All” Button selects more items as shown on search results.
  • Bugfix: Search functionality breaks when source select’s options contain hyphenated attributes.

v0.5.3 (11/29/2018)

  • Bugfix
  • Added more options and methods

v0.5.2 (11/18/2018)

  • Bugfix

v0.4.2 (10/17/2018)

  • Bugfix

v0.4.1 (10/15/2018)

  • Bugfix and SCSS

v0.4.0 (10/14/2018)

  • Info: First Beta Version
  • Add: A custom event listener which allows more details / arguments.
  • Add: The new on() method to use the new custom event listener.
  • Add: The new config() method to get and set configurations after init.
  • Add: The new setCSVInput() method to handle the CSV Input field.
  • Add: The new internal trigger() method which handles the events.
  • Add: The new default createGroup() and createItem() callback methods.
  • Add: The new cbLoopItem and cbLoopGroup options, which allows to use a custom callback function for the creation of options and groups within the dropdown list.
  • Add: The new multiSelectAll and multiSelectGroup options, which allows to (un)select all options or all options within a group!
  • Add: The new walker() function which replaces walk().
  • Add: The additional class name in-search on search-results.
  • Update: The jQuery and MooTools Bindings.
  • Update: The init() method on tailOptions uses now also set().
  • Update: The reload() method uses the same instance instead of creating a new one.
  • Update: The open(), close() and toggle() method accepts now one parameter, which disables | the animation (if turned on).
  • Update: The Group will also be shown on search-results.
  • Update: New strings including a new string-key structure (+ updated translations).
  • Update: Assign HTML String method instead of Single Element Creation on init().
  • Update: The default option for height has been changed to 350 (px) according to the new maxHeight JS-based setup (replaces the CSS setup).
  • Update: The sort callback on the walker() method is now called directly instead as callback within the sort() function!
  • Update: The CSS design has been modified and adapted to the new features.
  • Codacy: Expected ‘!==’ and instead saw ‘!=’. (eqeqeq)
  • Codacy: Avoid assignments in operands. (At least on if)
  • Codacy: ‘tailOptions’ was used before it was defined. (no-use-before-define)
  • Codacy: ‘i’ is already defined. (no-redeclare)
  • Rename: The internval variable tailSelect.instances has been renamed into tailSelect.inst.
  • Bugfix: Displaying of tail.select out of viewport #4. Thanks to tomasKucera
  • Bugfix: The items option object doesn’t added a option description.
  • Bugfix: Don’t close the dropdown list, when playing with the multiContainer element.
  • Bugfix: Already selected items can be selected again!
  • Bugfix: Load Items into the multiContainer and csvInput field on soft reloads.
  • Deprecated: The walk() function has been marked as deprecated and gets removed in the future!

v0.3.6 (10/11/2018)

  • Hotfix: Mismatching / Faulty Search Regex on different HTML conditions.

v0.3.5 (10/11/2018)

  • Update: Change for loop expression.
  • Codacy: ‘ev’ is already defined. (no-redeclare).
  • Codacy: ‘ev’ used outside of binding context. (block-scoped-var).
  • Bugfix: Constructor Instance check.
  • Bugfix: Wrong Version Number.
  • Hotfix: Searching when data-description containes > char

v0.3.4 (10/06/2018)

  • Add: The options csvOutput and csvSeparator as well as a hidden CSV input method.
  • Add: Support as Asynchronous Module Definition, tested with requireJS (I’m new with AMD).
  • Update: The animate option is now set to true per default!
  • Update: Correct use of the labels / placeholders.
  • Bugfix: Escape RegExp Characters in Search string.-with-javascript-and-css3

You Might Be Interested In:

2 thoughts on “Powerful Single & Multiple Select Library – tail.select

  1. sambrishes

    WoHoo \owo/,

    You’re really fast with the updates on your websites… Are you using any tool or (RSS) feed, which informs you about a new release (of my tail.* projects)?

    Anyway, thanks for updating (Just a small hint: `searcgConfig` was a typo in my README / JavaScript files which has been fixed to `searchConfig`). 😀

    Keep up your good work!



Leave a Reply