Create Functional, and Extensive Multi-Selection Fields Using JavaScript

tail.select script is back at tail.select.js, rewritten in vanilla javascript, and ready to beautify and expand HTML <select> fields … again! Add a search bar, multi-selection utilities (like select all or no buttons), deselect in individual-specific fields, perfect design, and many more easy-to-use functions for your web application.

This library has been seized and there is version 0.6 in the works. It is a great library worth living on.

Support

Do you really like my tail.select and want to support me and all my projects?
Then I would be very grateful for a coffee! (Thanks to all the supporters)

Features:

Beautiful. 5 different designs in many color schemes …
Extensive.
- Search bar to find options quickly …
- All / None buttons …
- Options to add, edit, delete, and modify at any time …
- Deselecting single selected fields …
- … and way more …
Configurable. 36 settings and 3 linkable events …
Translatable. Already available in 10 languages …
Zero Dependencies. And written in vanilla JavaScript …
Free/To/Use. Because it’s licensed by the Massachusetts Institute of Technology <3

Must Read: Easy-to-Use Multi-Selection Plugin for Bootstrap 5/4 | BsMultiSelect

How to make use of it:

Install:

npm install tail.select.js --save

yarn add tail.select.js --save

bower install tail.select.js --save

Basic Instructions

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="css/tail.select-default.css">
</head>
<body>
<script src="js/tail.select.min.js"></script>
<!-- <script src="langs/tail.select-{lang}.js"></script> -->

<select>
    <option>My First Option</option>
    <option>My Second Option</option>
    <option>My Third Option</option>
</select>

<script>
document.addEventListener('DOMContentLoaded', () => {
    tail.select('select', {
        // Your options here
    });
});
</script>
</body>
</html>

Default options

tail.select("select", {
    animate: true,              // [0.3.0]      Boolean
    classNames: null,           // [0.2.0]      Boolean, String, Array, null
    csvOutput: false,           // [0.3.4]      Boolean
    csvSeparator: ",",          // [0.3.4]      String
    descriptions: false,        // [0.3.0]      Boolean
    deselect: false,            // [0.3.0]      Boolean
    disabled: false,            // [0.5.0]      Boolean
    height: 350,                // [0.2.0]      Integer, null
    hideDisabled: false,        // [0.3.0]      Boolean
    hideSelected: false,        // [0.3.0]      Boolean
    items: {},                  // [0.3.0]      Object
    locale: "en",               // [0.5.0]      String
    linguisticRules: {          // [0.5.9]      Object
        "е": "ё",
        "a": "ä",
        "o": "ö",
        "u": "ü",
        "ss": "ß"
    },
    multiple: false,            // [0.2.0]      Boolean
    multiLimit: Infinity,       // [0.3.0]      Integer, Infinity
    multiPinSelected: false,    // [0.5.0]      Boolean
    multiContainer: false,      // [0.3.0]      Boolean, String
    multiShowCount: true,       // [0.3.0]      Boolean
    multiShowLimit: false,      // [0.5.0]      Boolean
    multiSelectAll: false,      // [0.4.0]      Boolean
    multiSelectGroup: true,     // [0.4.0]      Boolean
    openAbove: null,            // [0.3.0]      Boolean, null
    placeholder: null,          // [0.2.0]      String, null
    search: false,              // [0.3.0]      Boolean
    searchConfig: [             // [0.5.13]     Array
        "text", "value"
    ],
    searchFocus: true,          // [0.3.0]      Boolean
    searchMarked: true,         // [0.3.0]      Boolean
    searchMinLength: 1,         // [0.5.13]     Integer
    searchDisabled: true,       // [0.5.5]      Boolean
    sortItems: false,           // [0.3.0]      String, Function, false
    sortGroups: false,          // [0.3.0]      String, Function, false
    sourceBind: false,          // [0.5.0]      Boolean
    sourceHide: true,           // [0.5.0]      Boolean
    startOpen: false,           // [0.3.0]      Boolean
    stayOpen: false,            // [0.3.0]      Boolean
    width: null,                // [0.2.0]      Integer, String, null
    cbComplete: undefined,      // [0.5.0]      Function
    cbEmpty: undefined,         // [0.5.0]      Function
    cbLoopItem: undefined,      // [0.4.0]      Function
    cbLoopGroup: undefined      // [0.4.0]      Function
});

Translations

Anthony Rabine / French Translation
Igor / Brazilian Portuguese Translation
Noxludio / Finnish Translation
Roman Yepanchenko / Russian Translation
elPesecillo / Spanish Translation
Alberto Vincenzi / Italian Translation
WoxVold / Norwegish Translation
Spritus / Turkish Translation
5ergiu / Romanian Translation
achatzi78 / Greek Translation

Files

The tail.select package contains different JavaScript files:

js/tail.select(.min).js The main JavaScript with en translation strings only.
js/tail.select-full(.min).js The main JavaScript with ALL available translations.
langs/tail.select-all(.min).js Just ALL translation strings themselves.
langs/tail.select-{locale}.js Just the {locale} translation strings.