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

Basic usage:

Installation.

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

tail.select("select")

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

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

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

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

// sets CSV input
instance.setCSVInput();

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

Events.

instance.on('open', function(){
  //...
});

instance.on('close', function(){
  //...
});

instance.on('change', function(){
  //...
});

Changelog:

12/09/2018

• 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