tail.select
Advanced tools
Readme
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?
You really like my tail.select script and want to support me and all of my projects?
Then I would be extremely grateful for a coffee! (Thanks to all Supporters)
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/
The Documentation has been moved to GitHubs Wiki Pages, but I will keep a table of contents list here and some basic instructions.
The tail.select package contains different JavaScript files:
js/tail.select(.min).js The main JavaScript with en tranlation strings only.js/tail.select-full(.min).js The main JavaScript with ALL available translations.js/tail.select-es6(.min).js An experimental ECMAScript 2015 / ES6 Module version (includes all translations).langs/tail.select-all(.min).js Just ALL translation strings itself.langs/tail.select-{locale}.js Just 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
lingusticRules: {}, // EXPERIMENTAL SINCE 0.5.9
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 - 2019 SamBrishes, pytesNET
FAQs
Create beautiful, functional and extensive (Multi) select fields, written in Vanilla without any dependencies!
We found that tail.select demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA launched a new project called Vulnrichment to enrich CVEs with details that help prioritize patching and mitigation efforts, as the NVD backlog of unenriched CVEs awaiting analysis surpasses 10,000.
Security News
Socket is joining forces with CISA and other industry leaders at the RSA Conference to sign the Secure by Design pledge, committing to uphold the highest security standards in our products.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.