Powerful Single & Multiple Select Library – tail.select

Category: Form , Javascript | December 9, 2018
Author: pytesNET
Views Total: 713
Official Page: Go to website
Last Update: December 9, 2018
License: MIT


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.
  • Supports grouped options.
  • Adds custom descriptions to options.
  • Allows you to move the selected options to another element.
  • Useful options and API.

Basic usage:


$ npm install tail.select --save

Import the tail.select’s JavaScript and Stylesheet.

<link rel="stylesheet" href="tail.select.css">
<script src="tail.select.js"></script>

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>

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",

  // '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,

  // auto sets the focus
  searchFocus: true,

  // highlights matched options
  searchMarked: 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

API methods.

// sets label

// sets counter
instance.setCounter(count <int>);

// sets container
instance.setContainer(item <object>, state <string>);

// sets CSV input

// chooses an option
instance.choose(state <string>, key <string>, group <string>);

// opens the dropdown
instance.open(animate <undefined|false>);

// closes the dropdown
instance.close(animate <undefined|false>);

// toggles the dropdown

// remove

// reload

// sets options
instance.config(config <undefined|string>, value <*>);

// event
instance.on(event <string>, callback <callback>, args <undefined|array>);


instance.on('open', function(){

instance.on('close', function(){

instance.on('change', function(){



  • May become Version 0.5.4
  • 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:

Leave a Reply