tail.select - The jQuery-Less <select> alternative

The original tail.select package is deprecated, check out the new fork @ github.com/wolffe/tail.select.js or on npmjs.com/package/tail.select.js.

The default HTML <select> fields aren't the beauties in forms, regardless of the used operating system and browser. And even if you can adapt the main select container, using some flavor CSS, you're still getting some trouble with the dropdown box, especially on dark websites, because these aren't really designable (just a few CSS properties in a few browsers are available).

But that is just one reason, why many web-designers using a <select> replacement, such as Select2, Chosen, Selectize.js or SumoSelect. Many other developers choose such packages, because the trying to increase the usability and functionality of the respective form fields. A search can be really helpful if you have dozens or hundreds of options, a "Select All" / "Select None" button simplifies the multiple selection of an optgroup (for example), the ability to "unselect" an option on single <select> fields is also extremely useful for some projects.

Anyway, at least the named packages above have one and the same disadvantage: jQuery. Please don't get me wrong, this DOM library is really useful and helpful to write code fast (after reading the documentation and learning the respective behaviour). BUT, jQuery is also really fat and bulky, even for just small web projects. Since vanilla JavaScript is way easier to write, and there are way more helpful tutorials (such as here on dev.to) it doesn't make any sense to use jQuery anymore.

That's the Spirit of my tail.* projects

My tail.select project started as jQuery plugin, but since version 0.3.0 it is completely dependency-less. It is my pure vanilla JavaScript package against Select2, Chosen, Selectize.js and SumoSelect and all other jQuery based <select> replacements. It offers almost the same functionality (partly even beyond), offers many themes for light and dark websites and can be used with ease (and also with a good documentation).

It's still in Beta, why I'm still searching for people testing it and giving me feedback and suggestions to make the upcoming Version 1.0.0 as fast, lightweight and great as possible. (Which gets also re-written in TypeScript).

The best way to show you the current scope of the environment is the current available 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
});

I really appreciate any useful issue, pull request or suggestion. And I'm grateful to everyone who leaves jQuery and learning / using pure JavaScript instead. Thanks!

You can find the tail.select script on GitHub as well as on npm. And, of course, you can also visit the official demonstration page to see the script in action.

Thanks for reading.

Sincerely,
Sam @pytesNET.

Comments

[Ciprian Popescu]

Hi,

I would like to note a change for tail.select. The old repository is gone completely and the new version is here -

github.com/wolffe/tail.select.js
npmjs.com/package/tail.select.js

Also, the demo is available here -

getbutterfly.com/tail-select/

Since the plugin has disappeared, a few months ago, I have updated it to version 0.5.20 and an ES6 version 0.6 is in the works. I am maintaining this plugin/library full time.

[SamBrishes]

Hi,

thanks for the update. You can also take over the previously used NPM package repository (npmjs.com/package/tail.select) to reach more existing tail.select users. If you want that, just write me the desired @-maintainer name on NPM and I'll change that.

Sincerely,
Sam.

[Ciprian Popescu]

Hey Sam! Thanks for this, I missed this comment. My NPM username is @getbutterfly