Extend from $.fn.validatebox.defaults. Override defaults with $.fn.combo.defaults.
The combo display a editable text box and drop-down panel on html page. It is the base component for building other complex combo components such as combobox, combotree, combogrid, etc.
The combo can be created from a <select> or <input> element using javascript. Notice that creating combo from markup is not valid.
- <input id="cc" value="001">
- $('#cc').combo({
- required:true,
- multiple:true
- });
The properties extend from validatebox, below is the added properties for combo.
Name | Type | Description | Default |
---|---|---|---|
width | number | The width of the component. | auto |
height | number | The height of the component. This property is available since version 1.3.2. | 22 |
panelWidth | number | The drop down panel width. | null |
panelHeight | number | The drop down panel height. | 200 |
multiple | boolean | Defines if support multiple selection. | false |
selectOnNavigation | boolean | Defines if to select an item when navigating items with keyboard. This property is available since version 1.3.3. | true |
separator | string | The separator char for text when multiple selection. | , |
editable | boolean | Defines if user can type text directly into the field. | true |
disabled | boolean | Defines if to disable the field. | false |
readonly | boolean | Defines if the component is read-only. This property is available since version 1.3.3. | false |
hasDownArrow | boolean | Defines if to display the down arrow button. | true |
value | string | The default value. | |
delay | number | Delay to do searching from the last key input event. | 200 |
keyHandler | object |
A function called when user press key. The default keyHandler is defined as:
keyHandler: { up: function(){}, down: function(){}, enter: function(){}, query: function(q){} } |
Name | Parameters | Description |
---|---|---|
onShowPanel | none | Fires when drop down panel show. |
onHidePanel | none | Fires when drop down panel hide. |
onChange | newValue, oldValue | Fires when the field value is changed. |
The methods extend from validatebox, below is the added methods for combo.
Name | Parameter | Description |
---|---|---|
options | none | Return the options object. |
panel | none | Return the drop down panel object. |
textbox | none | Retun the textbox object. |
destroy | none | Destroy the component. |
resize | width | Resize the component width. |
showPanel | none | Show the drop down panel. |
hidePanel | none | Hide the drop down panel. |
disable | none | Disable the component. |
enable | none | Enable the component. |
readonly | mode |
Enable/Disable readonly mode. This method is available since version 1.3.3. Usage Example: $('#cc').combo('readonly'); // enable readonly mode $('#cc').combo('readonly', true); // enable readonly mode $('#cc').combo('readonly', false); // disable readonly mode |
validate | none | Validate the input value. |
isValid | none | Return the validate result. |
clear | none | Clear the component value. |
reset | none | Reset the component value. This method is available since version 1.3.2. |
getText | none | Get the input text. |
setText | text | Set the text value. |
getValues | none | Get the component value array. |
setValues | values | Set the component value array. |
getValue | none | Get the component value. |
setValue | value | Set the component value. |