Create Beautiful, Functional, and Extensive Multi-Selection Fields Using Pure JavaScript | tail.select.js

How to make use of it:

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 a current 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 bypassing the options object because of 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 strategies.

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

Powerful Single & Multiple Select Library, tail.select.js Plugin/Github, autocomplete multiple select javascript, custom multi select dropdown css

See Demo And Download