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,

  // 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: -1,

  // shows a counter
  multiShowCount: true,

  // 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: {},

  // 'ASC', 'DESC', or custom function
  sortItems: false,

  // 'ASC', 'DESC', or custom function
  sortGroups: false,

  // 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
  
})

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:

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