tail.select – Feature-Rich and Configurable Selections

tail.select

With tail.select you can create beautiful and function-rich single and multiple selection fields, which can easily by modified during the runtime. The script itself is a re-written vanilla Version of the jQuery Plugin from 2014, but Version 0.3.2 brings back the jQuery Binding as well as an MooTools implementation.

Download the latest version of tail.select as .ZIP or as .TAR package!

npm i tail.select --save

yarn add tail.select --save

Instructions

The project consists of the main JavaScript file and a Stylesheet, as well as an optional language file to translate the few tail.select strings into the German language. Everything can be installed using NPM (or consorts) or you embed the respective files through an CDN like UNPKG or jsDelivr.

 

Load tail.select

Before we can start, we need to load the main JavaScript file (js/tail.select(.min).js) as well as the main StyleSheet (css/tail.select.css), of course. To embed the resective files through hsDevlif or UNPKG use the following links:Embed tail.select using jsDevlir:

https://cdn.jsdelivr.net/npm/tail.select@latest/css/tail.select.css
https://cdn.jsdelivr.net/npm/tail.select@latest/js/tail.select.min.js

or

https://unpkg.com/tail.select/css/tail.select.css
https://unpkg.com/tail.select/js/tail.select.min.js

The stylesheets should be linked within the HTML header, the JavaScript can be located wherever you want, but we recommend to load it immediately after the started <body> tag.

<DOCTYPE html>
<html>
    <head>
        <!-- Required Stylesheet -->
        <link type="text/css" rel="stylesheet" href="/css/tail.select.css" />
    </head>
    <body>
        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/tail.select.js"></script>
    </body>
</html>

 

Init tail.select

Now you just need some few lines of JavaScript, to turn a HTML <select> field into the tail.select element. The following code can also be placed wherever you want, we recommend it near the closing </body> tag. To be sure, we call the tail.select method within the “DOMContentLoaded” event, which executes after the DOM has been loaded, but before all the page assets (Images, …) has.

document.addEventListener("DOMContentLoaded", function(){
    "use strict";

    // You can pass a single element ...
    tail.select(document.getElementById("my-select-field"));

    // ... multiple elements ...
    tail.select(document.getElementsByTagName("select"));

    // ... or also just a selector (which uses `querySelectorAll()`)!
    tail.select("select");
});

 

Configure tail.select

Now, after everything works fine, we can configure our tail.select editor with the second parameter. If necessary you can also translate each single string by just overwriting the core object as shown below.

tail.select("select", {
    width:              null,
    height:             null,
    classNames:         null,
    placeholder:        null,
    deselect:           false,
    animate:            false,
    openAbove:          null,
    stayOpen:           false,
    startOpen:          false,
    multiple:           false,
    multiLimit:         -1,
    multiShowCount:     true,
    multiContainer:     false,
    descriptions:       false,
    items:              {},
    sortItems:          false,
    sortGroups:         false,
    search:             false,
    searchFocus:        true,
    searchMarked:       true,
    hideSelect:         true,
    hideSelected:       false,
    hideDisabled:       false,
    bindSourceSelect:   false
});

tail.select.strings = {
    empty: "Keine Optionen verfügbar",
    limit: "Keine weiteren Optionen auswählbar",
    selectLimit: "Wähle bis zu %d Optionen...",
    placeholder: "Wähle eine Option...",
    searchField: "Tippen zum suchen...",
    searchEmpty: "Keine Ergebnisse gefunden...."
};

 

Configure: Options

width
This options configures the width of the tail.select field as well as for the dropdown field, you can use ‘auto’ to detect the current width or null (like the default) to set no width styling at all.
height
This options configures the maxHeight of the tail.select dropdown popup field, you can also use ‘null’ (like the default) to set not maxHeight at all.
classNames
This options adds additional classNames to the main tail.select element. You can define your class names as string or as array, set this option to ‘true’ to copy the class names of the source select field.
placeholder
This option sets the placeholder to the respective tail.select element, which is invisible on single not-deselectale fields. This option gets overwritten by the ‘placeholder’ (or as fallback on the ‘data-placeholder’) attribute on the respective source select field. If not placeholder is set at all ‘tail.select.strings.placeholder’ will be used!
deselect
This option allows to deselect single select fields, which theoretically isn’t possible in HTML. If enabled, tail.select will use ‘
animate
This options animates the open / close sequence of the tail.select dropdown field. Therefore it uses the classname ‘iodle’ during the animation.
openAbove
This option determines where the tail.select dropdown field is located. Use ‘true’ to open the dropdown field always above the select field, use ‘false’ for the opposite or just keep it to ‘null’, which will use the bottom location unless there is no room left for it.
stayOpen
This option will prevent the call of the ‘.close()’ method at the typical events, but you can still call the ‘.close()’ method on your own to close the dropdown field.
startOpen
This option will call the ‘.open()’ method directly after the tail.select initialization has been completed.
multiple
This option sets the ‘single / multiple’ option of the respective tail.select instance and gets overwritten by the source select element during the initialization.
multiLimit
This option allows to limit the selection to the respective number. Use ‘-1’ to disable any limit, use 0 to allow no selection at all. Please note: This option affects multiple select fields only!
multiShowCount
This option shows a small counter to the left of the tail.select label. Please note: this option is only available on multiple select fields!
multiContainer
This option allow on string-based element selector only. If passed it will move special handle objects to the respective element. Please note: This option is only available on multiple select fields!
descriptions
This option will enable the ‘description’ option on the respective tail.select instance. To add a description to an option just use the ‘data-description’ attribute on the respective HTML element.
items
This option can contain additional options, which should be shown within the tail.select instance (The respective items gets also created in the source select element). Check our the ‘tail.select.options’ documentation for more informations!
sortItems
This option configures the sort order of the shown options within the tail.select dropdown element. You can use ‘ASC’, ‘DESC’ or your own callback sort function!
sortGroups
This option configures the sort order of the shown option groups within the tail.select dropdown element. You can use ‘ASC’, ‘DESC’ or your own callback sort function!
search
This option will enable the search input field within the tail.select dropdown field.
searchFocus
This option will set the focus automatically to the search input field, when the dropdown field gets opened.
searchMarked
This option will ‘mark’ the search term on the respective option test within the given results.
hideSelect
This option will hide, set the ‘display: none;’ styling, to the source select element.
hideSelected
This option will hide all selected options within the tail.select dropdown list.
hideDisabled
This option will hide all disabled options within the tail.select dropdown list.
bindSourceSelect
This option will set an event listener to the source select element. Thus, all changes to the source
element will be taken over in the tail.select instance!

Leave a Reply

Top