The tail.select script is back and ready to beautify your (multiple) select fields again, now also with an own search method and many features to increase the usability and handling on many as well as on just a few options!

The tail.select script is back and ready to beautify your (multiple) select fields again, now also with an own search method and many features to increase the usability and handling on many as well as on just a few options! It contains all options and features from the original deprecated jQuery Version, back from 2014 (+ a MooTools implementation)!

Wanna see tail.select in action?

Wanna translate tail.select in your language?

Features

  • Compatible with all modern browsers, and also for IE >= 9.
  • Supports Single and Multiple Select fields, also deselect- and limitable!
  • Offers a Search field within the dropdown list to find the desired options quickly!
  • Offers a Description text to describe each single option!
  • Allows to manipulate (add, edit and delete) each single option during the runtime.
  • Move selected options wherever you want / need.
  • Bindings for the jQuery and MooTools library and usable as AMD and ES6 Module.
  • No dependencies, just include and use it!
  • Event Listeners to bind your own function on each action.
  • … and many settings to configure the environment and behavior!

Install & Embed

The master branch will always contain the latest Release, which you can download directly here as .tar or as .zip archive, or just visit the Releases Page on GitHub directly. You can also be cool and using npm, Yarn or bower:

npm install tail.select --save
yarn add tail.select --save
bower install tail.select --save

Using a CDN

You can also use the awesome CDN services from jsDelivr or UNPKG.

https://cdn.jsdelivr.net/npm/tail.select@latest
https://unpkg.com/tail.select

Thanks To

Translations

Documentation

The Documentation has been moved to GitHubs Wiki Pages, but I will keep a table of contents list here and some basic instructions.

Files

The tail.select package contains different JavaScript files:

  • js/tail.select(.min).js The main JavaScript with en language strings only.
  • js/tail.select-full(.min).js The main JavaScript with ALL language strings.
  • js/tail.select-es6(.min).js An experimental ECMAScript 2015 / ES6 Module version.
  • langs/tail.select-all(.min).js Just ALL language strings itself.
  • langs/tail.select-{locale}.js Just the {locale} language strings.

Basic Instructions

You can pass up to 2 arguments to the tail.select constructor, the first parameter is required and need to be an Element, a NodeList, a HTMLCollection, an Array with Element objects or just a single selector as string, which calls the querySelectorAll() method on its own. The second parameter is optional and, if set, MUST be an object with your tail.select options.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

        <link type="text/css" rel="stylesheet" href="css/tail.select-default.css" />
    </head>
    <body>
        <script type="text/javascript" src="js/tail.select.min.js"></script>
        <!-- <script type="text/javascript" src="langs/tail.select-{lang}.js"></script> -->

        <select>
            <option>My Option</option>
        </select>

        <script type="text/javascript">
            document.addEventListener("DOMContentLoaded", function(){
                tail.select("select", { /* Your Options */ });
            });
        </script>
    </body>
</html>

Default options

Please check out GitHubs Wiki Pages to read more about each single option!

tail.select("select", {
    animate: true,
    classNames: null,
    csvOutput: false,
    csvSeparator: ",",
    descriptions: false,
    deselect: false,
    disabled: false,                // NEW IN 0.5.0
    height: 350,
    hideDisabled: false,
    hideSelected: false,
    items: {},
    locale: "en",                   // NEW IN 0.5.0
    multiple: false,
    multiLimit: Infinity,           // UPDATE IN 0.5.0
    multiPinSelected: false,        // NEW IN 0.5.0
    multiContainer: false,          // UPDATE IN 0.5.0
    multiShowCount: true,
    multiShowLimit: false,          // NEW IN 0.5.0
    multiSelectAll: false,
    multiSelectGroup: true,
    openAbove: null,
    placeholder: null,
    search: false,
    searchFocus: true,
    searchMarked: true,
    sortItems: false,
    sortGroups: false,
    sourceBind: false,              // NEW IN 0.5.0
    sourceHide: true,               // NEW IN 0.5.0
    startOpen: false,
    stayOpen: false,                // UPDATED IN 0.5.0
    width: null,
    cbComplete: undefined,          // NEW IN 0.5.0
    cbEmpty: undefined,             // NEW IN 0.5.0
    cbLoopItem: undefined,
    cbLoopGroup: undefined
});

Copyright & License

Published under the MIT-License; Copyright © 2014 – 2018 SamBrishes, pytesNET

This section is currently closed due to the Strict Maintenance!

Leave a Reply

avatar
  Subscribe  
Notify of
This section is currently closed due to the Strict Maintenance!
This Website use (Browser) Cookies and the (JavaScript) HTML5 Storage to store user-related informations on YOUR own computer.
The stored data are used to increase the usability and user experience on www.pytes.net only!