The tail.select script is back and ready to beautify your (multiple) select fields again, now also with an own search method and many features to increase the usability and handling on many as well as on just a few options! It contains all options and features from the original deprecated jQuery Version, back from 2014 (+ a MooTools implementation)!
Wanna see tail.select in action?
Wanna translate tail.select in your language?
- Compatible with all modern browsers, and also for IE >= 9.
- Supports Single and Multiple Select fields, also deselect- and limitable!
- Offers a Search field within the dropdown list to find the desired options quickly!
- Offers a Description text to describe each single option!
- Allows to manipulate (add, edit and delete) each single option during the runtime.
- Move selected options wherever you want / need.
- Bindings for the jQuery and MooTools library and usable as AMD and ES6 Module.
- No dependencies, just include and use it!
- Event Listeners to bind your own function on each action.
- ... and many settings to configure the environment and behavior!
The master branch will always contain the latest Release, which you can download directly here as .tar or as .zip archive, or just visit the Releases Page on GitHub directly. You can also be cool and using npm, Yarn or bower:
npm install tail.select --save
yarn add tail.select --save
bower install tail.select --save
You can also use the awesome CDN services from jsDelivr or UNPKG.
https://cdn.jsdelivr.net/npm/tail.select@latest/
https://unpkg.com/tail.select/
- Octicons for the cute Icons
- jsCompress for the Compressor
- prismJS for the Syntax highlighting library
- MenuSpy for the Menu Navigation
The Documentation has been moved to GitHubs Wiki Pages, but I will keep a table of contents list here and some basic instructions.
- Install & Embed
- Default Usage
- Public Options
- Public Methods
- Events & Callbacks
- Internal Variables & Methods
- HowTos, Tips & Tricks
The tail.select package contains different JavaScript files:
js/tail.select(.min).jsThe main JavaScript withentranlation strings only.js/tail.select-full(.min).jsThe main JavaScript with ALL available translations.js/tail.select-es6(.min).jsAn experimental ECMAScript 2015 / ES6 Module version (includes all translations).langs/tail.select-all(.min).jsJust ALL translation strings itself.langs/tail.select-{locale}.jsJust the {locale} translation strings.
You can pass up to 2 arguments to the tail.select constructor, the first parameter is required
and need to be an Element, a NodeList, a HTMLCollection, an Array with Element objects or
just a single selector as string, which calls the querySelectorAll() method on its own. The
second parameter is optional and, if set, MUST be an object with your tail.select options.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="css/tail.select-default.css" />
</head>
<body>
<script type="text/javascript" src="js/tail.select.min.js"></script>
<!-- <script type="text/javascript" src="langs/tail.select-{lang}.js"></script> -->
<select>
<option>My Option</option>
</select>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(){
tail.select("select", { /* Your Options */ });
});
</script>
</body>
</html>Please check out GitHubs Wiki Pages to read more about each single option!
tail.select("select", {
animate: true,
classNames: null,
csvOutput: false,
csvSeparator: ",",
descriptions: false,
deselect: false,
disabled: false, // NEW IN 0.5.0
height: 350,
hideDisabled: false,
hideSelected: false,
items: {},
locale: "en", // NEW IN 0.5.0
multiple: false,
multiLimit: Infinity, // UPDATE IN 0.5.0
multiPinSelected: false, // NEW IN 0.5.0
multiContainer: false, // UPDATE IN 0.5.0
multiShowCount: true,
multiShowLimit: false, // NEW IN 0.5.0
multiSelectAll: false,
multiSelectGroup: true,
openAbove: null,
placeholder: null,
search: false,
searchFocus: true,
searchMarked: true,
searchDisabled: true, // NEW IN 0.5.5
sortItems: false,
sortGroups: false,
sourceBind: false, // NEW IN 0.5.0
sourceHide: true, // NEW IN 0.5.0
startOpen: false,
stayOpen: false, // UPDATED IN 0.5.0
width: null,
cbComplete: undefined, // NEW IN 0.5.0
cbEmpty: undefined, // NEW IN 0.5.0
cbLoopItem: undefined,
cbLoopGroup: undefined
});Published under the MIT-License; Copyright © 2014 - 2018 SamBrishes, pytesNET