Public Options

SamBrishes edited this page Nov 27, 2018 · 7 revisions

Public Options

Version LastUpdate

Default Options

The tail.select constructor returns an array with all instances depending on the first argument, or just the single instance itself, if the first argument results in just a single element!

    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
        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: true,           // NEW IN 0.5.0
        multiSelectAll: true,
        multiSelectGroup: true,
        openAbove: null,
        placeholder: null,
        search: false,
        searchFocus: true,
        searchMarked: true,
        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
    });

Options

animate

bool
This options animates the open / close sequence of the tail.select dropdown field. Therefore it uses the className 'idle' during the animation.

classNames

string|array|bool
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.

csvOutput

bool
This option will add a hidden input field, which takes over the name attribute of the source select field and contains the selected values - separated with the option separator defined in csvSeparator.

csvSeparator

string
This option defines the separator, which is used for the option csvOutput.

descriptions

string
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 option element.

deselect

bool
This option allows to deselect single select fields, which theoretically isn't possible in HTML. If enabled, tail.select will use <option>.hasAttribute("selected") instead of the <option>.selected variable. Please note: This option affects single select fields only!

disabled

bool
This option sets the 'disabled' attribute of the respective tail.select instance and gets overwritten by the source select element during the initialization.

height

string|int
This options configures the maxHeight of the tail.select dropdown popup field. Since version 0.4.0, it's no longer supported to pass null and the default has been changed to 350(px).

hideDisabled

bool
This option will hide all disabled options within the tail.select dropdown list.

hideSelected

bool
This option will hide all selected options within the tail.select dropdown list.

items

object
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!

locale

string
This option allows to set / change the localization / language. Please make sure to load the respective language strings AFTER the main tail.select JavaScript file.

multiple

bool
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

int
This option allows to limit the selection to the respective number. Use Infinity to disable any limit, use 0 to allow no selection at all. Please note: This option affects multiple select fields only!

multiPinSelected

bool
Use true to "pin" selected options on the top of the dropdown list. Please note: This option is only available on multiple select fields!

multiContainer

string|bool
This option allow on string-based element selector only. If passed it will move special handle objects to the respective element. You can also use true which moves the selected options into the label element of the tail.select instance! Please note: This option is only available on multiple select fields!

multiShowCount

bool
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!

multiShowLimit

bool
This option shows the number of selectable options next to the counter number. Please note: This option is only available on multiple select fields!

multiSelectAll

bool
This option will show a "Select All" / "Unselect All" action buttons on top of the dropdown list, which (un)selects all available options!

multiSelectGroup

bool
This option will show a "All" / "None" Button on each Optgroup header, which (un)selects all options within this group!

openAbove

bool
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.

placeholder

string
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!

search

bool
This option will enable the search input field within the tail.select dropdown field.

searchFocus

bool
This option will set the focus automatically to the search input field, when the dropdown field gets opened.

searchMarked

bool
This option will 'mark' the search term on the respective option text within the given results.

sortItems

string|function
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 compareFunction!

sortGroups

string|function
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 compareFunction!

sourceBind

bool
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!

sourceHide

bool
This option will hide, set the display: none styling, to the source select element. This option will also check if the source select field has a display: none; or visibility: hidden; property and adapt this to the main tail.select container

startOpen

bool
This option will call the .open() method directly after the tail.select initialization has been completed.

stayOpen

bool
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. You can pass true to stay open at all costs or false to close whenever the selection field gets forsaken. Since 0.5.0 you can also pass null, which closes whenever the user clicks "outside" of the select element, but will still stay open when the user selects an option!

width

string|int
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.

cbComplete

callback
This callback function gets fired every time when the .init() process of the tail.select instance has been finished / reached the end. The only argument, which gets passed, is the main tail.select container, but you can use this to access the class too!

cbEmpty

callback
This callback function gets fired every time when the Dropdown List gets rendered with no single option. Which happens on each "empty" select field and on each search which leads to no results. You function receives 2 arguments: The root .dropdown-inner element as well as the search string (on searches) or undefined otherwise.

cbLoopItem

callback
This option allows you to edit / manipulate each displayed item within the dropdown field, just pass a function, which accepts the following 3 arguments: (item , group , search <string|false>).

cbLoopGroup

callback
This option allows you to edit / manipulate each displayed group within the dropdown field, just pass a function, which accepts the following 2 arguments: (label , search <string|false>).


Default Usage

Public Methods

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.