Author: | pytesNET |
---|---|
Views Total: | 4,146 views |
Official Page: | Go to website |
Last Update: | October 25, 2021 |
License: | MIT |
Preview:

Description:
tail.select is a rewritten version of the jQuery tail.select plugin that can be used to beautify & enhance the default select box with no dependency.
Main features:
- Supports both single and multiple selection.
- Live search.
- 5 themes.
- Supports grouped options.
- Adds custom descriptions to options.
- Allows you to move the selected options to another element.
- Useful options and API.
Basic usage:
1. Install & download
# NPM $ npm install tail.select --save
2. Import the tail.select’s JavaScript and Stylesheet.
<!-- Default Themes --> <link rel="stylesheet" href="css/default/tail.select-dark-feather.min.css" /> <link rel="stylesheet" href="css/default/tail.select-dark.min.css" /> <link rel="stylesheet" href="css/default/tail.select-light-feather.min.css" /> <link rel="stylesheet" href="css/default/tail.select-light.min.css" /> <!-- Modern Themes --> <link rel="stylesheet" href="css/modern/tail.select-dark-feather.min.css" /> <link rel="stylesheet" href="css/modern/tail.select-dark.min.css" /> <link rel="stylesheet" href="css/modern/tail.select-light-feather.min.css" /> <link rel="stylesheet" href="css/modern/tail.select-light.min.css" /> <!-- Bootstrap themes --> <link rel="stylesheet" href="css/bootstrap4/tail.select-THEME-NAME.min.css" /> <link rel="stylesheet" href="css/bootstrap3/tail.select-THEME-NAME.min.css" /> <link rel="stylesheet" href="css/bootstrap2/tail.select-THEME-NAME.min.css" /> <!-- Core JavaScript --> <script src="js/tail.select.min.js"></script> <!-- Languages --> <script src="langs/tail.select-de.js"></script> <script src="langs/tail.select-es.js"></script> <script src="langs/tail.select-fi.js"></script> <script src="langs/tail.select-fr.js"></script> <script src="langs/tail.select-it.js"></script> <script src="langs/tail.select-no.js"></script> <script src="langs/tail.select-pt_BR.js"></script> <script src="langs/tail.select-ru.js"></script> <script src="langs/tail.select-tr.js"></script>
3. Initialize the tail.select on an existing select box.
<select id="example" class="example" multiple> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> ... </select>
tail.select("select")
4. Config the tail.select by passing the options object as the second parameter to the select
function.
tail.select("select",{ // width/heigh of the select width: null, height: 350, // CSS classes of the select classNames: null, // custom placeholder placeholder: null, // allows to deselect options or not deselect: false, // sets the 'disabled' attribute of the respective tail.select instance and gets overwritten by the source select element during the initialization disabled: false, // enables animations animate: false, // determines where to place the select openAbove: null, // stays open stayOpen: false, // opens the select on init startOpen: false, // enables multiple selection multiple: false, // maximum number of options allowed to select multiLimit: Infinity, // pins selected options on the top of the dropdown list. multiPinSelected: false, // shows a counter multiShowCount: true, // shows the number of selectable options next to the counter number multiShowLimit: false, // allows you to move selected options to another element multiContainer: false, // shows "Select All" / "Unselect All" buttons multiSelectAll: false, // shows "All" / "None" buttons on each Optgroup multiSelectGroup: true, // enables descriptions for options descriptions: false, // additonal options items: {}, // set / change the localization / language locale: "en", linguisticRules: { "е": "ё", "a": "ä", "o": "ö", "u": "ü", "ss": "ß" }, // 'ASC', 'DESC', or custom function sortItems: false, // 'ASC', 'DESC', or custom function sortGroups: false, // set an event listener to the source select element sourceBind: false, // set the display: none styling, to the source select element. sourceHide: true, // enables live search search: false, searcgConfig: [ "text", "value" ], // auto sets the focus searchFocus: true, // highlights matched options searchMarked: true, searchMinLength: 1, // allows to exclude disabled options on the search searchDisabled: true, // hide options hideSelect: true, // hides selected options hideSelected: false, // hides disabled options hideDisabled: false, // sets an event listener to the source select element bindSourceSelect: false, // enables CSV output csvOutput: false, csvSeparator: "," // function(item , group , search <string|false>){} cbLoopItem: undefined, // function(label , search <string|false>){} cbLoopGroup: undefined, // gets fired every time when the .init() process of the tail.select instance has been finished / reached the end cbComplete: undefined, // gets fired every time when the Dropdown List gets rendered with no single option cbEmpty: undefined })
5. API methods.
// opens the dropdown instance.open(animate <undefined|false>); // closes the dropdown instance.close(animate <undefined|false>); // toggles the dropdown instance.toggle(animate <undefined|false>); // enables the dropdown instance.enable(animate <undefined|false>); // disables the dropdown instance.disable(animate <undefined|false>); // remove instance.remove(); // reload instance.reload(); // sets options instance.config(config <undefined|string>, value <*>); // event instance.on(event <string>, callback <callback>, args <undefined|array>); // search the select instance.query(search, conf); // update info instance.update(item); instance.updateLabel(label); instance.updateContainer(item); instance.updatePin(item); instance.updateCSV(item); // get the respective option instance.options.get(key, group); // set options instance.options.set(option, rebuild); // add options instance.options.add(key, value, group, selected, disabled, description, rebuild); // move an option instance.options.move(item, group, new_group, rebuild); // remove an option instance.options.remove(key, group, rebuild); // check if the passed option has the respective state instance.options.is(state, key, group); // change the state (first argument) on the passed option instance.options.handle(state, key, group, _force); // enable an option instance.options.enable(key, group); // disable an option instance.options.disable(key, group); // select an option instance.options.select(key, group); // unselect an option instance.options.unselect(key, group); // toggle an option instance.options.toggle(key, group); // invert state instance.options.invert(state); // apply the passed state to all options instance.options.all(state, group); // apply a state function to multiple items instance.options.walk(state, items, args); // search through the option and return each one instance.options.finder(search, config); // return the search result as object instance.options.find(search, config); // loop each single option of the instance instance.options.walker(orderi, orderg);
6. Events.
instance.on('open', function(){ //... }); instance.on('close', function(){ //... }); instance.on('change', function(item, state){ //... });
Changelog:
v0.5.22 (10/25/2021)
- Add option deselect using the ENTER key
- Add Romanian (RO) translation
- Add Greek (GR) translation
v0.5.21 (05/25/2021)
- Remove CSS mappings
- Remove Bootstrap themes
- Fix Safari issue with unselectable input field
- Started cleaning up the code and assessing ES6 migration
- Started implementing CSS variables
v0.5.20 (05/07/2021)
- Add
.label-count--selected
class to count when count is higher than 0. - Add a reset function to restore a tail.select instance to the state it had when created. The built-in reload function only clears the underlying select element and rebuilds itself, leaving the actual instance in memory. Doing a repeated reload on the same select element lead to tail.select not picking up the selected option from the select anymore.
- Transfer
title
attribute fromoption
tag to tail.select entry.
v0.5.16 (07/25/2019)
- Bugfix: IE doesn’t recognize Object.constructor() as object (instead as function).
v0.5.15 (07/24/2019)
- Update: Differentiate .disabled and .hover colors.
- Support for hidden options
- Bugfix: Typo in searchConfig option key.
- Bugfix: Missing minified JavaScript files.
- Bugfix: Some Less styling issues.
- Bugfix: Using this.rebuild instead of rebuild in the .config() method.
- Bugfix: Using the olf method ._replaceTypo on the .invert() method (options class).
- Bugfix: The .query() method doesn’t handle false as item return [ES6 only].
- Bugfix: Bootstrap 4 Theme Icon Issue in Chrome.
v0.5.14 (07/09/2019)
- Hotfix: Unable to select options with apostrophes.
v0.5.13 (07/08/2019)
- Add: The new public method .value() to get the current selected option value(s).
- Add: Allow to change the minimum search length with the new searchMinLength option.
- Add: A new public .applyLinguisticRules() method on the options class.
- Update: A new search function, configurable with searchConfig.
- Update: Using window on the main factory function (required for Webpack / VueJS).
- Update: The internal helper methods cHAS(), cADD() and cREM().
- Bugs fixed.
- CSS Changes.
v0.5.12 (05/21/2019)
- Info: This is the first version, which drops IE 9 support!
- Add: Support for module exporting, tested with browserify.
- Add: New german linguistic rules for ä, ö, ü and ß.
- Add: The new browser package variable pointing to js/tail.select-full.js.
- Update: Using classList to add / remove / check class names.
- Update: Using Object.assign only to merge / clone object properties.
- Rename: The internal tailSelect variable has been renamed into select.
- Rename: The internal tailOptions variable has been renamed into options.
- Remove: Support for Internet Explorer 9.
- Bugfix: Add correct file to the main bower variable.
- Bugfix: Add correct file to the jsdelivr package variable.
v0.5.11 (05/04/2019)
- Add: The new Turkish Translation.
- Add: Support for tabindex (using Tab to move from input field to input field).
- Add: Key-Support for Space to open the current focused select field.
- Bugfix: Replace classnames with an Space to prevent missing space between class names.
v0.5.10 (04/18/2019)
- Add: The new Itlaian Translation.
- Add: The new Norwegish Translation.
v0.5.9 (03/26/2019)
- Add: The new experimental linguisticRules options, which allows to regex letters, which are (used) similiar.
- Update: [ES6] Changed the last var variables into let.
v0.5.8 (03/26/2019)
- Add: The new RussianTranslation.
- Add: Allow callback functions as strings to allow a deeper translation.
- Add: The new internal method _e, which handles the translations.
v0.5.7 (03/20/2019)
- Info: It isn’t longer possible to get an option using the internal option number!
- Remove: The internal-Array storage has been completely removed.
- Bugfix: The .remove() method on the options hasn’t worked on the internal-Array storage.
- Bugfix: The ECMAScript 6 Version returns an Array, while the default version does not.
- Bugfix: TypeError: Cannot convert undefined or null to object.
- Bugfix: Remove default options sorting.
v0.5.6 (01/31/2019)
- Add: The new Brazilian Portuguese Translation.
v0.5.5 (12/23/2018)
- Add: The new searchDisabled option, which allows to exclude disabled options on the search.
- Update: The .finder() method depends now on the .find() method.
- Bugfix: Wrong Version Number on the main object.
- Bugfix: Options floats over the dropdown field.
- Bugfix: Terrible performance of search when descriptions included
- Bugfix: Search functionality hangs exponentially when regular expression matches against larger source options.
v0.5.4 (12/09/2018)
- Add: The new
modify()
method on the string Storage to change the strings globally. - Update: The
.register()
method checks now if locale is a string and object a object. - Update: The
.register()
method returns nowtrue
on success andfalse
on failure! - Bugfix: ES6 The “Select All” Button doesn’t work on Search (All options gets selected).
- Bugfix: Z-Index CSS Styling bug (:hover).
- Bugfix: Unnecessary Scrollbar (during a wrong calculation of the dropdown field).
- Bugfix: “Select All” Button selects more items as shown on search results.
- Bugfix: Search functionality breaks when source select’s options contain hyphenated attributes.
v0.5.3 (11/29/2018)
- Bugfix
- Added more options and methods
v0.5.2 (11/18/2018)
- Bugfix
v0.4.2 (10/17/2018)
- Bugfix
v0.4.1 (10/15/2018)
- Bugfix and SCSS
v0.4.0 (10/14/2018)
- Info: First Beta Version
- Add: A custom event listener which allows more details / arguments.
- Add: The new on() method to use the new custom event listener.
- Add: The new config() method to get and set configurations after init.
- Add: The new setCSVInput() method to handle the CSV Input field.
- Add: The new internal trigger() method which handles the events.
- Add: The new default createGroup() and createItem() callback methods.
- Add: The new cbLoopItem and cbLoopGroup options, which allows to use a custom callback function for the creation of options and groups within the dropdown list.
- Add: The new multiSelectAll and multiSelectGroup options, which allows to (un)select all options or all options within a group!
- Add: The new walker() function which replaces walk().
- Add: The additional class name in-search on search-results.
- Update: The jQuery and MooTools Bindings.
- Update: The init() method on tailOptions uses now also set().
- Update: The reload() method uses the same instance instead of creating a new one.
- Update: The open(), close() and toggle() method accepts now one parameter, which disables | the animation (if turned on).
- Update: The Group will also be shown on search-results.
- Update: New strings including a new string-key structure (+ updated translations).
- Update: Assign HTML String method instead of Single Element Creation on init().
- Update: The default option for height has been changed to 350 (px) according to the new maxHeight JS-based setup (replaces the CSS setup).
- Update: The sort callback on the walker() method is now called directly instead as callback within the sort() function!
- Update: The CSS design has been modified and adapted to the new features.
- Codacy: Expected ‘!==’ and instead saw ‘!=’. (eqeqeq)
- Codacy: Avoid assignments in operands. (At least on if)
- Codacy: ‘tailOptions’ was used before it was defined. (no-use-before-define)
- Codacy: ‘i’ is already defined. (no-redeclare)
- Rename: The internval variable tailSelect.instances has been renamed into tailSelect.inst.
- Bugfix: Displaying of tail.select out of viewport #4. Thanks to tomasKucera
- Bugfix: The items option object doesn’t added a option description.
- Bugfix: Don’t close the dropdown list, when playing with the multiContainer element.
- Bugfix: Already selected items can be selected again!
- Bugfix: Load Items into the multiContainer and csvInput field on soft reloads.
- Deprecated: The walk() function has been marked as deprecated and gets removed in the future!
v0.3.6 (10/11/2018)
- Hotfix: Mismatching / Faulty Search Regex on different HTML conditions.
v0.3.5 (10/11/2018)
- Update: Change for loop expression.
- Codacy: ‘ev’ is already defined. (no-redeclare).
- Codacy: ‘ev’ used outside of binding context. (block-scoped-var).
- Bugfix: Constructor Instance check.
- Bugfix: Wrong Version Number.
- Hotfix: Searching when data-description containes > char
v0.3.4 (10/06/2018)
- Add: The options csvOutput and csvSeparator as well as a hidden CSV input method.
- Add: Support as Asynchronous Module Definition, tested with requireJS (I’m new with AMD).
- Update: The animate option is now set to true per default!
- Update: Correct use of the labels / placeholders.
- Bugfix: Escape RegExp Characters in Search string.-with-javascript-and-css3
WoHoo \owo/,
You’re really fast with the updates on your websites… Are you using any tool or (RSS) feed, which informs you about a new release (of my tail.* projects)?
Anyway, thanks for updating (Just a small hint: `searcgConfig` was a typo in my README / JavaScript files which has been fixed to `searchConfig`). 😀
Keep up your good work!
Sincerely,
Sam.
Hi,
I would like to report a change for tail.select. The old repository is gone completely and the new version is here –
https://github.com/wolffe/tail.select.js
https://www.npmjs.com/package/tail.select.js
Also, the demo is available here –
https://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.