Enables/disables the jqxComboBox.

Code example

Initialize a jqxComboBox with the disabled property specified.

$("#jqxComboBox").jqxComboBox({ disabled: true }); 

Gets or sets the jqxComboBox width.

Code example

Initialize a jqxComboBox with the width property specified.

$("#jqxComboBox").jqxComboBox({ width: '250px', height: '250px' });
                        

Gets or sets the jqxComboBox height.

Code example

Initialize a jqxComboBox with the height property specified.

$("#jqxComboBox").jqxComboBox({ width: '250px', height: '250px' });
                        

Sets the widget's theme.

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file. In order to set a theme, you need to do the following:

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'energyblue' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
  
  

• Set the widget's theme property to 'energyblue' when you initialize it.

Gets or sets the selected index.

Code example

Initialize a jqxComboBox with the selectedIndex property specified.

$("#jqxComboBox").jqxComboBox({selectedIndex: 2 }); 

Gets or sets the item search mode. When the user types into the edit field, the jqxComboBox widget tries to find the searched item using the entered text and the selected search mode. Possible Values: 'none, 'contains', 'containsignorecase', 'equals', 'equalsignorecase', 'startswithignorecase', 'startswith', 'endswithignorecase', 'endswith'

Code example

Initialize a jqxComboBox with the searchMode property specified.

$("#jqxComboBox").jqxComboBox({searchMode: 'contains' }); 

Gets or sets the whether the 'autoComplete' feature is enabled or disabled. When this feature is enabled, the jqxComboBox displays in the popup listbox, only the items that match the searched text.

Code example

Initialize a jqxComboBox with the autoComplete property specified.

$("#jqxComboBox").jqxComboBox({autoComplete: true }); 

Determines whether the items displayed in the popup come from a remote data source. When this property is set to true, the jqxComboBox calls the 'search' callback function when the user types into the input field.

Code example

Initialize a jqxComboBox with the remoteAutoComplete property specified.

$("#jqxComboBox").jqxComboBox({remoteAutoComplete: true }); 

Determines the delay between two keystrokes. The search callback function is called on timeout. The value is specified in milliseconds.

Code example

Initialize a jqxComboBox with the remoteAutoCompleteDelay property specified.

$("#jqxComboBox").jqxComboBox({remoteAutoCompleteDelay: 500 }); 

Determines the minimum number of characters that need to be entered by the user for search in remote data source when remoteAutoComplete property is set to true.

Code example

Initialize a jqxComboBox with the minLength property specified.

$("#jqxComboBox").jqxComboBox({minLength: 3 }); 

Callback function which is called when the 'remoteAutoComplate' property is set to true and the user types into the ComboBox's input field.

Code example

Initialize a jqxComboBox with the search property specified.

$("#jqxcombobox").jqxComboBox(
{
    width: 250,
    height: 25,
    source: dataAdapter,
    remoteAutoComplete: true,
    selectedIndex: 0,
    displayMember: "name",
    valueMember: "countryName",
    renderer: function (index, label, value) {
        var item = dataAdapter.records[index];
        if (item != null) {
            var label = item.name + ", " + item.countryName + ", " + item.adminName1;
            return label;
        }
        return "";
    },
    renderSelectedItem: function(index, item)
    {
        var item = dataAdapter.records[index];
        if (item != null) {
            var label = item.name + ", " + item.countryName + ", " + item.adminName1;
            return label;
        }
        return "";   
    },
    search: function (searchString) {
        dataAdapter.dataBind();
    }
});
                        

Gets or sets the items source.

Code example

Initialize a jqxComboBox with the source property specified.

var data = [

"Affogato",

"Americano",

"Bicerin"

];

$("#jqxComboBox").jqxComboBox({source: data});

Binding using the jqx.dataAdapter(requires jqxdata.js):

// url of the data.
var url = "../sampledata/customers.txt";
var parentsLength = $("#jqxWidget").parents().length;
if (parentsLength > 3) {
    url = 'demos/sampledata/customers.txt';
}

// prepare the data. Set the datatype to 'json', 'xml', 'tsv', 'array', 'local' or 'csv.
var source =
{
    datatype: "json",
    datafields: [
        { name: 'CompanyName' },
        { name: 'ContactName' }
    ],
    id: 'id',
    url: url
};
// create a new instance of the jqx.dataAdapter.
var dataAdapter = new $.jqx.dataAdapter(source);

// Create a jqxListBox
$("#jqxWidget").jqxComboBox({ source: dataAdapter, displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 250, theme: theme });

Sets the displayMember of the Items. The displayMember specifies the name of an object property to display. The name is contained in the collection specified by the 'source' property.

Code example

Initialize a jqxListBox with the displayMember property specified.

$("#jqxComboBox").jqxComboBox({displayMember: 'firstName'});

Sets the valueMember of the Items. The valueMember specifies the name of an object property to set as a 'value' of the list items. The name is contained in the collection specified by the 'source' property.

Code example

Initialize a jqxComboBox with the valueMember property specified.

$("#jqxComboBox").jqxComboBox({valueMember: 'lastName'});

Determines whether checkboxes will be displayed next to the list items. (The feature requires jqxcheckbox.js)

Code example

Initialize a jqxComboBox with the checkboxes property specified.

$("#combobox").jqxComboBox({checkboxes:true}); 

Gets or sets the scrollbars size.

Code example

Initialize a jqxComboBox with the scrollBarSize property specified.

$("#jqxComboBox").jqxComboBox({scrollBarSize:25}); 

Enables/disables the hover state.

Code example

Initialize a jqxComboBox with the enableHover property specified.

$("#jqxComboBox").jqxComboBox({enableHover: false}); 

Enables/disables the selection.

Code example

Initialize a jqxComboBox with the enableSelection property specified.

$("#jqxComboBox").jqxComboBox({enableSelection:false}); 

Gets or sets whether the dropdown detects the browser window's bounds and automatically adjusts the dropdown's position.

Code example

Initialize a jqxComboBox with the enableBrowserBoundsDetection property specified.

$("#jqxComboBox").jqxComboBox({enableBrowserBoundsDetection: false}); 

Gets or sets whether the DropDown is automatically opened when the mouse cursor is moved over the widget.

Code example

Initialize a jqxComboBox with the autoOpen property specified.

$("#combobox").jqxComboBox({ autoOpen: true });
                        

Sets the DropDown's alignment. Possible values: 'left' and 'right'.

Code example

$('#combobox').jqxComboBox({ dropDownHorizontalAlignment: 'right'}); 

Gets or sets the height of the jqxComboBox's ListBox displayed in the widget's DropDown.

Code example

Initialize a jqxComboBox with the dropDownHeight property specified.

$("#jqxComboBox").jqxComboBox({dropDownHeight: 250}); 

Gets or sets the width of the jqxComboBox's ListBox displayed in the widget's DropDown.

Code example

Initialize a jqxComboBox with the dropDownWidth property specified.

$("#jqxComboBox").jqxComboBox({dropDownWidth: 250}); 

Gets or sets whether the height of the jqxComboBox's ListBox displayed in the widget's DropDown is calculated as a sum of the items heights.

Code example

Initialize a jqxComboBox with the autoDropDownHeight property specified.

$("#jqxComboBox").jqxComboBox({autoDropDownHeight: true}); 

Gets or sets the height of the jqxComboBox Items. When the itemHeight == - 1, each item's height is equal to its desired height.

Code example

Initialize a jqxComboBox with the itemHeight property specified.

$("#jqxComboBox").jqxComboBox({itemHeight: 25}); 

Callback function which is called when an item is rendered. By using the renderer function, you can customize the look of the list items.

Code example

Set the renderer property

$('#combobox').jqxComboBox({renderer: function (index, label, value) {
        var datarecord = data[index];
        return datarecord.firstname + " " + datarecord.lastname;
    }
});
                        

Callback function which is called when the selected item is rendered. By using the renderSelectedItem function, you can customize the displayed text in the ComboBox's input field.

Code example

Set the renderSelectedItem property

renderSelectedItem: function(index, item)
{
    var item = dataAdapter.records[index];
    if (item != null) {
        var label = item.name + ", " + item.countryName + ", " + item.adminName1;
        return label;
    }
    return "";   
}
                        

Sets the delay of the 'open' animation.

Code example

Set the openDelay property

$('#combobox').jqxComboBox({openDelay: 200});
                        

Sets the delay of the 'close' animation.

Code example

Set the closeDelay property

$('#combobox').jqxComboBox({closeDelay: 200});
                        

Sets the type of the animation. Possible values: 'fade', 'slide' and 'none'.

Code example

Set the animationType property

$('#combobox').jqxComboBox({animationType: 'none'});
                        

This event is triggered when the user selects an item.

Code example

Bind to the select event by type: jqxComboBox.

$('#combobox').bind('select', function (event) 
{
    var args = event.args;
    if (args) {
        var index = args.index;
        var item = args.item;
        // get item's label and value.
        var label = item.label;
        var value = item.value;
    }
}); 
                        

This event is triggered when the user unselects an item.

Code example

Bind to the unselect event by type: jqxComboBox.

$('#combobox').bind('unselect', function (event) 
{
    var args = event.args;
    if (args) {
        var index = args.index;
        var item = args.item;
        // get item's label and value.
        var label = item.label;
        var value = item.value;
    }
}); 
                        

This event is triggered when the user selects an item.

Code example

Bind to the change by type: jqxComboBox.

$('#combobox').bind('change', function (event) 
{
    var args = event.args;
    if (args) {
        var index = args.index;
        var item = args.item;
        // get item's label and value.
        var label = item.label;
        var value = item.value;
    }
}); 
                        

This event is triggered when the popup ListBox is opened.

Code example

Bind to the open by type: jqxComboBox.

$('#jqxComboBox').bind('open', function (event) { // Some code here. }); 

This event is triggered when the popup ListBox is closed.

Code example

Bind to the close by type: jqxComboBox.

$('#jqxComboBox').bind('close', function (event) { // Some code here. });
                        

This event is triggered when an item is checked/unchecked.

Code example

Bind to the checkChange by type: jqxComboBox.

$("#combobox").bind('checkChange', function (event) {
    if (event.args) {
        var item = event.args.item;
        var value = item.value;
        var label = item.label;
        var checked = item.checked;
        var checkedItems = $("#combobox").jqxComboBox('getCheckedItems');
    }
});
                        

This event is triggered when the data binding operation is completed.

Code example

Bind to the bindingComplete event by type: jqxListBox.

$("#combobox").bind('bindingComplete', function (event) {

});

Adds a new item to the jqxComboBox. Returns 'true', if the new item is added or false if the item is not added.

Code example

Invoke the addItem method.

// @param String

$("#jqxComboBox").jqxComboBox('addItem', 'jQuery' ); 

Inserts a new item to the jqxComboBox.

Code example

Invoke the insertAt method.

// @param String

// @param Number

$("#jqxComboBox").jqxComboBox('insertAt', 'jQuery', 1 ); 

Removes an item from the jqxComboBox. Index is a number of the item to remove

Code example

Invoke the removeAt method.

// @param Number

$("#jqxComboBox").jqxComboBox('removeAt', 3 ); 

Disables an item by index. Index is a number.

Code example

Invoke the disableAt method.

// @param Number

$("#jqxComboBox").jqxComboBox('disableAt', 8 ); 

Enables a disabled item by index. Index is a number.

Code example

Invoke the enableAt method.

// @param Number

$("#jqxComboBox").jqxComboBox('enableAt', 3 ); 

Ensures that an item is visible. index is number. When necessary, the jqxComboBox scrolls to the item to make it visible.

Code example

Invoke the ensureVisible method.

// @param Number

$("#jqxComboBox").jqxComboBox('ensureVisible', 2 ); 

Gets item by index.

Item Fields

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

Code example

Invoke the getItem method.

// @param Number

var item = $("#jqxComboBox").jqxComboBox('getItem', 1 ); 

Gets an item by its value.

Item Fields

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

Code example

Invoke the getItemByValue method.

// @param Value

var item = $("#jqxWidget").jqxComboBox('getItemByValue', "Bon app'");

Gets all items.

Code example

Invoke the getItems method.

var items = $("#jqxComboBox").jqxComboBox('getItems'); 

Gets the checked items.

Code example

Invoke the getCheckedItems method.

var items = $("#combobox").jqxComboBox('getCheckedItems'); 

Gets the selected item.

Code example

Invoke the getSelectedItem method.

// @param Number

var item = $("#jqxComboBox").jqxComboBox('getSelectedItem'); 

Gets the index of the selected item.

Code example

Invoke the getSelectedIndex method.

// @param Number

var index = $("#jqxComboBox").jqxComboBox('getSelectedIndex'); 

Selects an item by index.

Code example

Invoke the selectIndex method.

// @param Number

$("#jqxComboBox").jqxComboBox('selectIndex', 0 ); 

Unselects item by index.

Code example

Invoke the unselectIndex method.

// @param Number

$("#jqxComboBox").jqxComboBox('unselectIndex', 5 ); 

Selects an item.

Code example

Invoke the selectItem method.

// @param List Item

$("#widget").jqxComboBox('selectItem', item ); 

*To get an item, use the getItem or getItemByValue methods.

Unselects an item.

Code example

Invoke the unselectItem method.

// @param List Item

$("#widget").jqxComboBox('unselectItem', item ); 

*To get an item, use the getItem or getItemByValue methods.

Clears all selected items.

Code example

Invoke the clearSelection method.

$("#jqxComboBox").jqxComboBox('clearSelection'); 

Clears all items.

Code example

Invoke the clear method.

$("#jqxComboBox").jqxComboBox('clear'); 

Hides the popup listbox.

Code example

Invoke the close method.

$("#jqxComboBox").jqxComboBox("close" ); 

Shows the popup listbox.

Code example

Invoke the open method.

$("#jqxComboBox").jqxComboBox('open' ); 

Checks a list item when the 'checkboxes' property value is true.

Code example

Invoke the 'checkIndex' method.

$("#combobox").jqxComboBox('checkIndex', 0); 

Unchecks a list item when the 'checkboxes' property value is true.

Code example

Invoke the 'uncheckIndex' method.

$("#combobox").jqxComboBox('uncheckIndex', 0); 

indeterminates a list item when the 'checkboxes' property value is true.

Code example

Invoke the 'indeterminateIndex' method.

$("#combobox").jqxComboBox('indeterminateIndex', 0); 

Checks an item.

Code example

Invoke the checkItem method.

// @param list Item

$("#widget").jqxComboBox('checkItem', item ); 

*To get an item, use the getItem or getItemByValue methods.

Unchecks an item.

Code example

Invoke the uncheckItem method.

// @param list Item

$("#widget").jqxComboBox('uncheckItem', item ); 

*To get an item, use the getItem or getItemByValue methods.

Indeterminates an item.

Code example

Invoke the indeterminateItem method.

// @param list Item

$("#widget").jqxComboBox('indeterminateItem', item ); 

*To get an item, use the getItem or getItemByValue methods.

Checks all list items when the 'checkboxes' property value is true.

Code example

Invoke the 'checkAll' method.

$("#combobox").jqxComboBox('checkAll'); 

Unchecks all list items when the 'checkboxes' property value is true.

Code example

Invoke the 'uncheckAll' method.

$("#combobox").jqxComboBox('uncheckAll'); 

Loads list items from a 'select' tag.

Code example

Invoke the 'loadFromSelect' method.

$("#combobox").jqxComboBox('loadFromSelect', 'select');

'select' is the id of a select tag. Code Example:

   <select style='height: 25px; width: 200px; margin-left: 30px;' id='select'>
                    <option>Affogato</option>
                    <option>Americano</option>
                    <option>Bicerin</option>
                    <option>Breve</option>
                    <option>Café Bombón</option>
                    <option>Caffé Corretto</option>
                    <option>Café Crema</option>
                    <option>Caffé Latte</option>
                    <option>Caffé macchiato</option>
                    <option>Café mélange</option>
                    <option>Coffee milk</option>
                    <option>Cafe mocha</option>
                    <option>Cappuccino</option>
                    <option>Carajillo</option>
                    <option>Cuban espresso</option>
                    <option>Espresso</option>
                    <option>The Flat White</option>
                    <option>Frappuccino</option>
                    <option>Galao</option>
                    <option>Greek frappé coffee</option>
                    <option>Iced Coffee</option>
                    <option>Indian filter coffee</option>
                    <option>Instant coffee</option>
                    <option>Irish coffee</option>
                    <option>Liqueur coffee</option>
                </select>

Sets the focus to the widget.

Code example

Invoke the 'focus' method.

$("#combobox").jqxComboBox('focus');

Gets or Sets the input field's value.

Code example

Invoke the 'val' method.

var val = $("#combobox").jqxComboBox('val');