YouTip

* * jQuery EasyUI Plugin](#) * * * Extends from $.fn.combo.defaults. Override defaults by using $.fn.combobox.defaults. The combobox displays an editable text box and a drop-down list. Users can select one or more values from the drop-down list. Users can type text directly into the top of the list or select one or more existing values from the list. !(#) ## Dependencies * combo ## Usage Create a combobox from a `` element with a predefined structure. aitem1 bitem2 bitem3 ditem4 eitem5 Create a combobox from an `` tag. Create a combobox using JavaScript. $('#cc').combobox({ url:'combobox_data.json', valueField:'id', textField:'text'}); Create two dependent comboboxes. 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 The properties extend from combo, here are the properties added for combobox. | Name | Type | Description | Default Value | | --- | --- | --- | --- | | valueField | string | The name of the field to bind to the ComboBox's value. | value | | textField | string | The name of the field to bind to the ComboBox's text. | text | | groupField | string | Indicates the field to be grouped. This property is available since version 1.3.4. | null | | groupFormatter | function(group) | Returns the group text to display on the group item. This property is available since version 1.3.4. Code example: $('#cc').combobox({groupFormatter: function(group){return '' + group + '';}}); | | | mode | string | Defines how to load list data when the text changes. Set to 'remote' if the combobox loads from server. When set to 'remote' mode, the value typed by the user will be sent as an HTTP request parameter named 'q' to the server to retrieve new data. | local | | url | string | The URL to load list data from a remote server. | null | | method | string | The HTTP method to use to retrieve data. | post | | data | array | The list data to be loaded. Code example: | null | | filter | function | Defines how to filter local data when 'mode' is set to 'local'. The function has two parameters: q: The text typed by the user. row: The row data in the list. Return true to allow showing this row. Code example: $('#cc').combobox({filter: function(q, row){var opts = $(this).combobox('options');return row[opts.textField].indexOf(q) == 0;}}); | | | formatter | function | Defines how to render the row. The function has 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 a remote server. Return false to cancel this action. The function has the following parameters: param: The parameter object to pass to the remote server. success(data): The callback function to be called when the data is successfully retrieved. error(): The callback function to be called when the data retrieval fails. | json loader | | loadFilter | function(data) | Returns the filtered data to display. This property is available since version 1.3.3. | | ## Events The events extend from combo, here are the events added for combobox. | Name | Parameters | Description | | --- | --- | --- | | onBeforeLoad | param | Fires before the request to load data is made. Return false to cancel the 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 the remote data is loaded successfully. | | onLoadError | none | Fires when the remote data load fails. | | onSelect | record | Fires when the user selects a list item. | | onUnselect | record | Fires when the user unselects a list item. | ## Methods The methods extend from combo, here are the methods added or overridden 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. 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 | Sets an array of combobox values. Code example: $('#cc').combobox('setValues', ['001','002']); | | setValue | value | Sets the combobox value. Code example: $('#cc').combobox('setValue', '001'); | | clear | none | Clears the combobox value. | | select | value | Selects the specified option. | | unselect | value | Unselects the specified option. | * * jQuery EasyUI Plugin](#)