jQuery EasyUI Form Plugin - `Combobox`

Extends from $.fn.combo.defaults. Overrides the default defaults with $.fn.combobox.defaults.

The Combobox displays an editable text box and a drop-down list, allowing users to select a value from the list or enter a new value. Users can type directly into the top of the list or select one or multiple predefined values from the list.

Dependencies

combo

Usage

Create a Combobox from a <select> element with a predefined structure.

<select id="cc" class="easyui-combobox" name="dept" style="width:200px;">
    <option value="aa">aitem1</option>
    <option>bitem2</option>
    <option>bitem3</option>
    <option>ditem4</option>
    <option>eitem5</option>
</select>

Create a Combobox from an <input> tag.

<input id="cc" class="easyui-combobox" name="dept"
    data-options="valueField:'id',textField:'text',url:'get_data.php'">

Create a Combobox using JavaScript.

<input id="cc" name="dept" value="aa">

$('#cc').combobox({
    url:'combobox_data.json',
    valueField:'id',
    textField:'text'
});

Create two dependent Comboboxes.

&lt;input id="cc1" class="easyui-combobox" data-options="
    valueField: 'id',
    textField: 'text',
    url: 'get_data1.php',
    onSelect: function(rec){
    var url = 'get_data2.php?id='+rec.id;
    $('#cc2').combobox('reload', url);
    }">
<input id="cc2" class="easyui-combobox" data-options="valueField:'id',textField:'text'">

Example of JSON data format:

[{
    "id":1,
    "text":"text1"
},{
    "id":2,
    "text":"text2"
},{
    "id":3,
    "text":"text3",
    "selected":true
},{
    "id":4,
    "text":"text4"
},{
    "id":5,
    "text":"text5"
}]

Properties

This property extends from Combo, and adds the following properties for Combobox.

Name	Type	Description	Default
valueField	string	The name of the underlying data to bind to the Combobox's value.	value
textField	string	The name of the underlying data to bind to the Combobox's text.	text
groupField	string	Indicates the field to be grouped. Available since version 1.3.4.	null
groupFormatter	function(group)	Returns the group text to display on the grouped item. Available since version 1.3.4. <br>Example: $('#cc').combobox({<br> groupFormatter: function(group){<br> return '<span style="color:red">' + group + '</span>';<br> }<br>});
mode	string	Defines how to load list data when text changes. Set to 'remote' if the Combobox loads from a server. When in 'remote' mode, the input value will be sent as the 'q' parameter to the server to fetch new data.	local
url	string	The URL to load list data from a remote server.	null
method	string	The http method to retrieve data.	post
data	array	The list data to be loaded. <br>Example: <input class="easyui-combobox" data-options="<br> valueField: 'label',<br> textField: 'value',<br> data: [{<br> label: 'java',<br> value: 'Java'<br> },{<br> label: 'perl',<br> value: 'Perl'<br> },{<br> label: 'ruby',<br> value: 'Ruby'<br> }]" />	null
filter	function	Defines how to filter local data when 'mode' is set to 'local'. The function has two parameters: <br>q: The text entered by the user. <br>row: The row data in the list. <br>Return true to allow the row to be displayed. <br> <br>Example: $('#cc').combobox({<br> filter: function(q, row){<br> var opts = $(this).combobox('options');<br> return row[opts.textField].indexOf(q) == 0;<br> }<br>});
formatter	function	Defines how to render a row. The function has one parameter: row. <br>Example: $('#cc').combobox({<br> formatter: function(row){<br> var opts = $(this).combobox('options');<br> return row[opts.textField];<br> }<br>});
loader	function(param,success,error)	Defines how to load data from a remote server. Return false to cancel the action. The function has the following parameters: <br>param: The parameter object to be sent to the remote server. <br>success(data): The callback function to be called when data is successfully fetched. <br>error(): The callback function to be called when data fetching fails.	json loader
loadFilter	function(data)	Returns the filtered data to be displayed. Available since version 1.3.3.

Events

This event extends from Combo, and adds the following events for Combobox.

Name	Parameters	Description
onBeforeLoad	param	Triggered before the request to load data, return false to cancel the load action. <br>Example: // change the http request parameters before loading data from the server<br>$('#cc').combobox({<br> onBeforeLoad: function(param){<br> param.id = 2;<br> param.language = 'js';<br> }<br>});
onLoadSuccess	none	Triggered when remote data is loaded successfully.
onLoadError	none	Triggered when remote data loading fails.
onSelect	record	Triggered when the user selects a list item.
onUnselect	record	Triggered when the user unselects a list item.

Methods

This method extends from Combo, and adds or overrides the following methods for Combobox.

Name	Parameters	Description
options	none	Returns the options object.
getData	none	Returns the loaded data.
loadData	data	Loads local list data.
reload	url	Requests remote list data. Pass the 'url' parameter to override the original URL value. <br>Example: $('#cc').combobox('reload'); // reload list data using old URL<br>$('#cc').combobox('reload','get_data.php'); // reload list data using new URL
setValues	values	Sets an array of values for the Combobox. <br>Example: $('#cc').combobox('setValues', ['001','002']);
setValue	value	Sets the value for the Combobox. <br>Example: $('#cc').combobox('setValue', '001');
clear	none	Clears the Combobox value.
select	value	Selects the specified option.
unselect	value	Unselects the specified option.