Create beautiful, functional and extensive (Multi) Select Fields with pure, vanilla JavaScript.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css Version 0.5.4 Dec 10, 2018
js Version 0.5.4 Dec 10, 2018
langs Version 0.5.4 Dec 10, 2018
less Version 0.5.4 Dec 10, 2018
.gitattributes Version 0.5.4 Dec 10, 2018
CHANGELOG.md Version 0.5.4 Dec 10, 2018
LICENSE.md Version 0.5.1 - Hotfix Nov 27, 2018
README.md Version 0.5.3 Nov 28, 2018
bower.json Version 0.5.0 Nov 27, 2018
package.json Version 0.5.4 Dec 10, 2018
project.synder Version 0.5.4 Dec 10, 2018

README.md

tail.select - Beautify Select Fields

plainJS npm Version npm Downloads License Author

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