How Tos

HowTo: Tips, Tricks and Ideas

The following tips and tricks are intended to reveal the extensive capabilities of the tail.select library!

Table of Contents

• Readonly Mode
• AJAX-load Options
• Limit shown Options

How To enable the readOnly Mode

The default HTML select field allows a disabled attribute / state, which deactivates the complete form field and prevents the dropdown field to open. This is the default behavior within your browser and also on the tail.select library, at least since version 0.5.0. But you can also create a "pseudo" readOnly mode, which isn't supported in HTML but by tail.select.

To achieve a readOnly mode, where you can see the options but can't select any, you need to enable the select field first. Now just set the multiLimit option to 0 (zero), and enable the deselect option too if your select field isn't multiple!

How to "AJAX-load" your Options

As shown in the last example on our demonstration page: You're still able to add and modify elements after the first initialization. You can either use the items option or the <tail-select>.options.add() method!

var select = tail.select("select.my-select", {
    items: {
        key1: "value1",         // Just a Key -> innerText Pair
        key2: {                 // Complete Option Structure
            value: "value2",
            group: "#",         // The optgroup, the default is "#"
            selected: false,    // Pre-Select Item
            disabled: false,    // Pre-Disable Item
            description: ""     // Custom Option Description
        }
    }
});
myAjaxResponse(function(jsonData){

    // Just pass the "jsonData" if the object has the
    // common structure (as shown above)

    select.options.add(jsonData);
});

How to limit the shown Options

As asked on Issue #13 you can also "limit" the shown options within the dropdown field by using the callback option cbLoopItem (and if required cbLoopGroup).

The following snippet shows just 50 items within the tail.select dropdown field and will break the loop after the 50th option. But you can still search through all available options, because the "search" function uses the source <select> field which will ALWAYS contain all options!

var select = tail.select("select.my-select", {
    cbLoopItem: function(item, optgroup, search, root){
        if(search){
            // Show all options on search, according to the search value of course!
            return this.cbItem.apply(this, arguments);
        }
        if(root.querySelectorAll(".dropdown-option").length >= 50){
            // Escape the Options Loop after 50 Items
            return false;
        }

        // Render the default option element
        return this.cbItem.apply(this, arguments);
    }
});