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 a 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
custom multiple select, multiselect, jquery multiple select plugin, multiselect dropdown, multiple select jquery, fancy multiple select
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
Official Website(wolffe): Click Here
This superior jQuery/javascript plugin is developed by wolffe. For extra Advanced Usages, please go to the official website.