Create Beautiful, Functional, and Extensive Multi-Selection Fields Using Pure 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.

See Demo And Download

tail-select-js

Official Website(wolffe): Click Here

This superior jQuery/javascript plugin is developed by wolffe. For extra Advanced Usage, please go to the official website.

Related Posts

Google-Translate-Dropdown-Customize-With-Country-Flag

Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…

Bootstrap-Fileinput

HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….

HStack-and-VStack-in-CSS

CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…

Floating-Whatsapp-Chat-Button

How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…

Data-Table-Generator-Tabulator

Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…

alert-confirm-prompt-attention-js

Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…

Leave a Reply

Your email address will not be published. Required fields are marked *