YouTipPlugins Form Combo
# jQuery EasyUI Form Plugin – Combo
* * jQuery EasyUI Plugins](#)
* * *
Extended from $.fn.validatebox.defaults. Use $.fn.combo.defaults to override default values.
The combo component displays an editable text box and a drop-down panel on an HTML page. It is the base component for creating other complex combo components (e.g., combobox, combotree, combogrid, etc.).
!(#)
## Dependencies
* validatebox
* panel
## Usage
The combo can be created from a `` or `` element using JavaScript. Note that creating a combo from markup is invalid.
```javascript
$('#cc').combo({
required:true,
multiple:true
});
## Properties
The properties extend from validatebox, below are the properties added to combo.
| Name | Type | Description | Default Value |
| :--- | :--- | :--- | :--- |
| 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 width of the drop-down panel. | null |
| panelHeight | number | The height of the drop-down panel. | 200 |
| multiple | boolean | Defines if to support multiple selection. | false |
| selectOnNavigation | boolean | Defines if to select an item when navigating through it using the keyboard. This property is available since version 1.3.3. | true |
| separator | string | The separator text for multiple selection. | , |
| editable | boolean | Defines if the user can type text directly into the text field. | true |
| disabled | boolean | Defines if to disable the text 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 show the down arrow button. | true |
| value | string | The default value. | |
| delay | number | The delay to start searching from the last key input event. | 200 |
| keyHandler | object | The function to be called when the user presses a key. The default keyHandler is defined as: keyHandler: {up: function(){},down: function(){},enter: function(){},query: function(q){}} | |
## Events
| Name | Parameters | Description |
| :--- | :--- | :--- |
| onShowPanel | none | Fires when the drop-down panel is shown. |
| onHidePanel | none | Fires when the drop-down panel is hidden. |
| onChange | newValue, oldValue | Fires when the value of the text field is changed. |
## Methods
The methods extend from validatebox, below are the methods added to combo.
| Name | Parameters | Description |
| :--- | :--- | :--- |