tail.select - The jQuery-Less <select> alternative
Tags: javascript, select, html, package
Published: 2019-07-08 15:21:08

> The original tail.select package is deprecated, check out the new fork @ [github.com/wolffe/tail.select.js](http://github.com/wolffe/tail.select.js) or on [npmjs.com/package/tail.select.js](http://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**](https://github.com/pytesNET/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](https://github.com/pytesNET/tail.select/wiki)).

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:

```javascript
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](https://github.com/pytesNET/tail.select) as well as on [npm](https://www.npmjs.com/package/tail.select). And, of course, you can also visit the [official demonstration page](https://github.pytes.net/tail.select/) to see the script in action.

Thanks for reading.

Sincerely,
Sam [@pytesNET](https://www.twitter.com/pytesNET).