Events Callbacks

Events & Callbacks

Events

open

This event gets fired everytime when the main tail.select dropdown opens / gets visible. You can only hook the main tail.select container, available through the internal variable <instance>.select, which requires the additional event prefix: tail::open.

BUT: The easiest way is to use our public method .on("open", function(){})

close

This event gets fired everytime when the main tail.select dropdown closes / gets invisible. You can only hook the main tail.select container, available through the internal variable <instance>.select, which requires the additional event prefix: tail::close.

BUT: The easiest way is to use our public method .on("close", function(){})

change

This event gets fired everytime when a option gets enabled, disabled, selected or unselected. You can also hook the source select field (using "change" or "input" as event name) but this way will "only" receive selections and unselections, or you can hook yourself to the tail.select container, available through the internal variable <instance>.select, which requires the additional event prefix: tail::change.

BUT: The easiest way is to use our public method .on("change", function(item, state){})

Arguments

Your callback function receives 2 parameters:

• item The current / concerned item object
• state The respective state ("select", "deselect", "enable", "disable")

Callbacks

cbComplete

You can hook your own function to the cbComplete option, which gets triggered AFTER EACH initialization. The initialization (or init() method) gets triggered on start as well as EVERYTIME when an option (or a bunch of option gets changed), or if your calling the .reload() or .init() method on your own, of course.

cbLoopGroup

You can hook your own function to the cbLoopGroup option to intervene or take over the render process for each single option group. Your own function receives 3 parameters:

• group The group label as string
• search The search string (if it is a search), undefined otherwise
• root The root "dropdown-inner" object.

Your own function SHOULD return an Element object, which gets added to the dropdown list, but you can also return null to skip this single optgroup and false to break the render process. Check out the How To page for more informations.

Please Note

• The first or main "option group" is "#", if no optgroup element is defined at least.
• You MUST return an <ul> Element, if you're don't manipulate cbLoopItem too!
• You MUST render the multiSelectGroup elements on your own!
• You MUST NOT add the global data-group attribute!

cbLoopItem

You can hook your own function to the cbLoopItem option to intervene or take over the render process for each single option. Your own function receives 4 parameters:

• item The current item object, which should get rendered
• optgroup The current "group" / "parent" Element
• search The search string (if it is a search), undefined otherwise
• root The root "dropdown-inner" object.

Your own function SHOULD return an Element object, which gets added to the dropdown list, but you can also return null to skip this single option and false to break the render process. Check out the How To page for more informations.

Please Note

• You MUST return an <li> Element, if you're don't manipulate cbLoopGroup too!
• You MUST NOT add the global data-key or data-group attributes!
• You MUST NOT add a click event handler!