How Tos
The following tips and tricks are intended to reveal the extensive capabilities of the tail.select library!
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!
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);
});
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);
}
});