TagBox
Extend from $.fn.combobox.defaults. Override defaults with $.fn.tagbox.defaults.
The TagBox component extends from combobox, it has all features of combobox. The TagBox allows the user to display tag labels instead of displaying values on the inputing box.
Dependencies
- combobox
Usage Example
Create tagbox from markup.
Create tagbox by using javascript.
Properties
The properties extend from combobox, below is the added properties for tagbox:
| Name | Type | Description | Default |
|---|---|---|---|
| hasDownArrow | boolean | Defines if to display the down arrow button. | false |
| tagFormatter | function(value,row) |
The function to return the formatted value.
Code example:
$('#tb').tagbox({
tagFormatter: function(value,row){
var opts = $(this).tagbox('options');
return row ? row[opts.textField] : value;
}
});
|
|
| tagStyler | function(value,row) |
The tag styler function, return style string to custom the tag style such as 'background:red'.
Code example:
$('#tb').tagbox({
tagStyler: function(value){
if (value == 3){
return 'background:#ffd7d7;color:#c65353';
} else if (value == 4){
return 'background:#b8eecf;color:#45872c';
}
}
});
|
Events
The events extend from combobox, below is the added events for tagbox.
| Name | Parameters | Description |
|---|---|---|
| onClickTag | value | Fires when the tag is clicked. |
| onBeforeRemoveTag | value | Fires before removing a tag, return false to deny the action. |
| onRemoveTag | value | Fires when the user removes a tag. |
Methods
The methods extend from combobox.