Powerful Single & Multiple Select Library – tail.select

Preview:

Description:

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
$ 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>
  ...
</select>

tail.select("select")

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

tail.select("select",{

  // 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
instance.remove();

// reload
instance.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
instance.update(item);
instance.updateLabel(label);
instance.updateContainer(item);
instance.updatePin(item);
instance.updateCSV(item);

// 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
instance.options.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){
  //...
});

Changelog:

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