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.
Top comments (3)
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.
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.
Hey Sam! Thanks for this, I missed this comment. My NPM username is
@getbutterfly