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.