Author: | pytesNET |
---|---|
Views Total: | 6,679 views |
Official Page: | Go to website |
Last Update: | July 25, 2019 |
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.
- Supports grouped options.
- Adds custom descriptions to options.
- Allows you to move the selected options to another element.
- Useful options and API.
Basic usage:
Installation.
# NPM $ npm install tail.select --save
Import the tail.select’s JavaScript and Stylesheet.
<link rel="stylesheet" href="tail.select.css"> <script src="tail.select.js"></script>
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")
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 })
API methods.
// sets label instance.setLabel(); // sets counter instance.setCounter(count <int>); // sets container instance.setContainer(item <object>, state <string>); // sets CSV input instance.setCSVInput(); // chooses an option instance.choose(state <string>, key <string>, group <string>); // 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.enable(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>);
Events.
instance.on('open', function(){ //... }); instance.on('close', function(){ //... }); instance.on('change', function(item, state){ //... });
Changelog:
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.