How to use

// Vanilla JavaScript
document.addEventListener("DOMContentLoaded", function(){
    var options = { /* Your Options */ };

    // Just use an CSS Selector...
    tail.writer(".my-tail-editor", options);

    // ... or an Element
    tail.writer(document.getElementById("tail-editor"), options);
});

// MooTools Edition
window.addEvent("domready", function(){
    var options = { /* Your Options */ };

    // Single Selector
    $("my-textarea").tailWriter(options);

    // Multi Selector
    $$("my-textareas").tailWriter(options);
});

// jQuery Edition
jQuery(document).ready(function(){
    var options = { /* Your Options */ };

    // The known jQuery method
    jQuery(".my-tail-editor").tailWriter(options);
});

Features

Check out the demonstration

• • Compatible with all modern browsers, and also for IE >= 9.
• • Single and Multiple select fields, deselect- and limitable
• • A search field, to find required options with ease
• • Hide and Move selected (and disabled) options
• • Manipulate, Add, Edit and Delete options on the fly
• • Optional descriptions to describe the single options
• • Optional dropdown open/close animation and handling options
• • Implementations for the MooTools and the jQuery libraries
• • ... and a few more feature-rich settings

Embed

Just download the archive and include the js/tail.select(.min).js script as well as the css/tail.select.css stylesheet into your HTML document.

<link type="text/css" rel="stylesheet" href="css/tail.select.css" />
<script type="text/javascript" src="js/tail.select.min.js"></script>

Download tail.select using NPM

npm -i tail.select

Embed tail.select using jsDevlir

https://cdn.jsdelivr.net/npm/tail.select@latest/css/tail.select.css
https://cdn.jsdelivr.net/npm/tail.select@latest/js/tail.select.min.js

Embed tail.select using UNPKG

https://unpkg.com/tail.select/css/tail.select.css
https://unpkg.com/tail.select/js/tail.select.min.js

Documentation

The documentation is still WiP

Options

All options (with the default settings):

$$("select").tailselect({
    width:              null,
    height:             null,
    classNames:         null,
    placeholder:        null,
    deselect:           false,
    animate:            false,
    openAbove:          null,
    stayOpen:           false,
    startOpen:          false,
    multiple:           false,
    multiLimit:         -1,
    multiShowCount:     true,
    multiContainer:     false,
    descriptions:       false,
    items:              {},
    sortItems:          false,
    sortGroups:         false,
    search:             false,
    searchFocus:        true,
    searchMarked:       true,
    hideSelect:         true,
    hideSelected:       false,
    hideDisabled:       false,
    bindSourceSelect:   false
});

width

string|int
This options configures the width of the tail.select field as well as for the dropdown field, you can use 'auto' to detect the current width or null (like the default) to set no width styling at all.

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.