Combo

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.

Dependencies

  • validatebox
  • panel

Usage

The combo can be created from a <select> or <input> element using javascript. Notice that creating combo from markup is not valid.


Properties

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){}
}

Events

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.

Methods

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.