Combo

Extend from $.fn.textbox.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

  • textbox
  • 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 textbox, 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. 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
panelMinWidth number The minimum width of the drop down panel. Available since version 1.4. null
panelMaxWidth number The maximum width of the drop down panel. Available since version 1.4. null
panelMinHeight number The minimum height of the drop down panel. Available since version 1.4. null
panelMaxHeight number The maximum height of the drop down panel. Available since version 1.4. null
panelAlign string The panel alignment. Possible values are: 'left', 'right'. Available since version 1.3.6. left
multiple boolean Defines if support multiple selection. false
selectOnNavigation boolean Defines if to select an item when navigating items with keyboard. 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. 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(e){},
	down: function(e){},
	left: function(e){},
	right: function(e){},
	enter: function(e){},
	query: function(q,e){}
}

Events

The events extend from textbox, below is the added events for combo.

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 textbox, 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. 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. 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.
?