http://www.jeasyui.com/documentation/combobox.php
ComboBox
Extend from $.fn.combo.defaults. Override defaults with $.fn.combobox.defaults.
The combobox display a editable text box and drop-down list, from which the user can select one or multiple values.The user can type text directly into the top of list, or select one or more of present values from the list.
Dependencies
- combo
Usage Example
Create combobox from <select> element with a pre-defined 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 combobox from <input> markup.
- <input id="cc" class="easyui-combobox" name="dept"
- data-options="valueField:'id',textField:'text',url:'get_data.php'" />
Create combobox using javascript.
- <input id="cc" name="dept" value="aa">
- $('#cc').combobox({
- url:'combobox_data.json',
- valueField:'id',
- textField:'text'
- });
Create two dependent comboboxes.
- <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'" />
The json data format sample:
- [{
- "id":1,
- "text":"text1"
- },{
- "id":2,
- "text":"text2"
- },{
- "id":3,
- "text":"text3",
- "selected":true
- },{
- "id":4,
- "text":"text4"
- },{
- "id":5,
- "text":"text5"
- }]
Properties
The properties extend from combo, below is the added properties for combobox.
Name | Type | Description | Default |
---|---|---|---|
valueField | string | The underlying data value name to bind to this ComboBox. | value |
textField | string | The underlying data field name to bind to this ComboBox. | text |
mode | string | Defines how to load list data when text changed.Set to 'remote' if the combobox loads from server.When set to 'remote' mode, what the user types will be sent as the http request parameter named 'q' to server to retrieve the new data. | local |
url | string | A URL to load list data from remote. | null |
method | string | The http method to retrieve data. | post |
data | array | The list data to be loaded. Code example: <input class="easyui-combobox" data-options=" valueField: 'label', textField: 'value', data: [{ label: 'java', value: 'Java' },{ label: 'perl', value: 'Perl' },{ label: 'ruby', value: 'Ruby' }]" /> | null |
filter | function | Defines how to filter the local data when 'mode' is set to 'local'. The function takes two parameters: q: the user typed text. row: the list row data. Return true to allow the row to be displayed. Code example: $('#cc').combobox({ filter: function(q, row){ var opts = $(this).combobox('options'); return row[opts.textField].indexOf(q) == 0; } }); | |
formatter | function | Defineds how to render the row. The function takes one parameter: row. Code example: $('#cc').combobox({ formatter: function(row){ var opts = $(this).combobox('options'); return row[opts.textField]; } }); | |
loader | function(param,success,error) | Defines how to load data from remote server. Return false can abort this action.This function takes following parameters: param: the parameter object to pass to remote server. success(data): the callback function that will be called when retrieve data successfully. error(): the callback function that will be called when failed to retrieve data. | json loader |
Events
The events extend from combo, below is the added events for combobox.
Name | Parameters | Description |
---|---|---|
onBeforeLoad | param | Fires before a request is made to load data, return false to cancel this load action. Code example: // change the http request parameters before load data from server $('#cc').combobox({ onBeforeLoad: function(param){ param.id = 2; param.language = 'js'; } }); |
onLoadSuccess | none | Fires when remote data is loaded successfully. |
onLoadError | none | Fires when remote data load error. |
onSelect | record | Fires when user select a list item. |
onUnselect | record | Fires when user unselect a list item. |
Methods
The methods extend from combo, below is the added or overridden methods for combobox.
Name | Parameter | Description |
---|---|---|
options | none | Return the options object. |
getData | none | Return the loaded data. |
loadData | data | Load the locale list data. |
reload | url | Request the remote list data. Pass the 'url' parameter to override the original URL value. Code example: $('#cc').combobox('reload'); // reload list data using old URL $('#cc').combobox('reload','get_data.php'); // reload list data using new URL |
setValues | values | Set the combobox value array. Code example: $('#cc').combobox('setValues', ['001','002']); |
setValue | value | Set the combobox value. Code example: $('#cc').combobox('setValue', '001'); |
clear | none | Clear the combobox value. |
select | value | Select the specified item. |
unselect | value | Unselect the specified item. |