Skip to content

Create beautiful, functional and extensive (multi)select fields with pure, vanilla JavaScript.

License

Notifications You must be signed in to change notification settings

wolffe/tail.select.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

42 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

tail.select.js - Beautify Select Fields

npm npm NPM

Replace and Improve your HTML <select> fields with style and without jQuery!

The tail.select script is back, rewritten in vanilla JavaScript and ready to beautify and extend your HTML <select> fields... again! Add a search bar, multi-selection utilities (such as select all or none buttons), a perfect design and many more user-friendly functions to your web application.

NOTE #1: If you want to use the latest version and your implementation is simple, or if you are starting a new project from scratch, then you can use the 1.x branch. This branch is actively maintained.

NOTE #2: Version 0.5.23 is the last one in the 0.5.x branch. The next version is 1.x and contains breaking changes. If you have an older implementation, and you use custom code, please stick to the 0.5.x branch. This branch is no longer maintained, but it's stable.


Want to see tail.select in action?

Support

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)

Buy Me A Coffee

Features

  • Beautiful. 2 different designs (light and dark)
  • Extensive.
    • Search bar to find options quickly...
    • All / None optgroup selection buttons...
  • Translatable.
  • Zero dependencies. And written in vanilla JavaScript...
  • Free to use. Because it's MIT licensed <3

Install & Embed

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.js --save
yarn add tail.select.js --save
bower install tail.select.js --save

Using a CDN

You can also use the awesome CDN services from jsDelivr or UNPKG.

https://www.npmjs.com/package/tail.select.js
https://cdn.jsdelivr.net/npm/tail.select.js@1.0.0/js/tail.select.min.js
https://unpkg.com/browse/tail.select.js@1.0.0/

Thanks To (0.5.x Branch)

  • SamBrishes, pytesNET (Copyright © 2014-2019)
  • Octicons for the cute Icons

Translations (0.5.x Branch)

Documentation (0.5.x Branch)

The documentation has been moved to GitHubs Wiki Pages, but I will keep a table of contents list here and some basic instructions.

Files (0.5.x Branch)

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.
  • langs/tail.select-all(.min).js Just ALL translation strings itself.
  • langs/tail.select-{locale}.js Just the {locale} translation strings.

Basic Instructions (0.5.x Branch)

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">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="css/tail.select-default.css">
</head>
<body>
<script src="js/tail.select.min.js"></script>
<!-- <script src="langs/tail.select-{lang}.js"></script> -->

<select>
    <option>My First Option</option>
    <option>My Second Option</option>
    <option>My Third Option</option>
</select>

<script>
document.addEventListener('DOMContentLoaded', () => {
    tail.select('select', {
        // Your options here
    });
});
</script>
</body>
</html>

Default options (0.5.x Branch)

Please check out GitHubs Wiki Pages to read more about each single option!

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
});