taffy-coustom-ui
Version:
3,746 lines • 201 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../../../../Styles/jqx.apireference.css" type="text/css" />
<script type="text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../../../scripts/documentation.js"></script>
<meta name="keywords" content="jQuery, List, Combo Box, DropDownList, Popup List, DropDown List, Input" />
<meta name="description" content="This page represents the help documentation of the jqxComboBox widget." />
<title>jqxComboBox API Reference</title>
<script type="text/javascript">
$(document).ready(function () {
$(".documentation-option-type-click").click(function (event) {
$(event.target).parents('tr').next().find(".property-content").toggle();
});
});
</script>
</head>
<body>
<div id="properties">
<h2 class="documentation-top-header">Properties</h2>
<table class="documentation-table">
<tr>
<th>Name
</th>
<th>Type
</th>
<th>Default
</th>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span42'>animationType</span>
</td>
<td>
<span>String</span>
</td>
<td>'slide'
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets the type of the animation.
</p>
<b>Possible Values:</b>
<br />
<pre><code>'fade'</code></pre>
<pre><code>'slide'</code></pre>
<pre><code>'none'</code></pre>
<h4>Code example</h4>
<p>
Set the <code>animationType</code> property
</p>
<pre><code>$('#jqxComboBox').jqxComboBox({animationType: 'none'});
</code></pre>
<p>
Get the <code>animationType</code> property.
</p>
<pre><code>var animationType = $('#jqxComboBox').jqxComboBox('animationType');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/CyqFs/">animationType is set to 'fade'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span25'>autoComplete</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets 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.
</p>
<h4>Code example</h4>
<p>
Set the <code>autoComplete</code> property.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox({autoComplete: true }); </code></pre>
<p>
Get the <code>autoComplete</code> property.
</p>
<pre><code>var autoComplete = $('#jqxComboBox').jqxComboBox('autoComplete');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/xyanw/">autoComplete is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span50'>autoOpen</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets whether the DropDown is automatically opened when the mouse cursor is moved over the widget.
</p>
<h4>Code example</h4>
<p>
Set the <code>autoOpen</code> property.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox({ autoOpen: true });
</code></pre>
<p>
Get the <code>autoOpen</code> property.
</p>
<pre><code>var autoOpen = $('#jqxComboBox').jqxComboBox('autoOpen');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/n9yez/">autoOpen is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span87'>autoItemsHeight</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets whether items will wrap when they reach the width of the dropDown.
</p>
<h4>Code example</h4>
<p>
Set the <code>autoItemsHeight</code> property.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox({autoItemsHeight: true}); </code></pre>
<p>
Get the <code>autoItemsHeight</code> property.
</p>
<pre><code>var autoItemsHeight = $('#jqxComboBox').jqxComboBox('autoItemsHeight'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/xrfm0jq5/">autoItemsHeight is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span29'>autoDropDownHeight</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets whether the height of the jqxComboBox's ListBox displayed in the widget's DropDown is calculated as a sum of the items heights.
</p>
<h4>Code example</h4>
<p>
Set the <code>autoDropDownHeight</code> property.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox({autoDropDownHeight: true}); </code></pre>
<p>
Get the <code>autoDropDownHeight</code> property.
</p>
<pre><code>var autoDropDownHeight = $('#jqxComboBox').jqxComboBox('autoDropDownHeight');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/cv2Pf/">autoDropDownHeight is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span39'>closeDelay</span>
</td>
<td>
<span>Number</span>
</td>
<td>400
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets the delay of the 'close' animation.
</p>
<h4>Code example</h4>
<p>
Set the <code>closeDelay</code> property
</p>
<pre><code>$('#jqxComboBox').jqxComboBox({closeDelay: 200});
</code></pre>
<p>
Get the <code>closeDelay</code> property.
</p>
<pre><code>var closeDelay = $('#jqxComboBox').jqxComboBox('closeDelay');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/aHvdH/">closeDelay is set to 2000</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span56'>checkboxes</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Determines whether checkboxes will be displayed next to the list items. (The feature requires jqxcheckbox.js)
</p>
<h4>Code example</h4>
<p>
Set the <code>checkboxes</code> property.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox({checkboxes:true}); </code></pre>
<p>
Get the <code>checkboxes</code> property.
</p>
<pre><code>var checkboxes = $('#jqxComboBox').jqxComboBox('checkboxes');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/BcjKH/">checkboxes is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='property-name-disabled'>disabled</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Enables/disables the jqxComboBox.
</p>
<h4>Code example</h4>
<p>
Set the <code>disabled</code> property.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox({ disabled: true }); </code></pre>
<p>
Get the <code>disabled</code> property.
</p>
<pre><code>var disabled = $('#jqxComboBox').jqxComboBox('disabled');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/sgfND/">disabled is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span35'>displayMember</span>
</td>
<td>
<span>String</span>
</td>
<td>""
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets 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.
</p>
<h4>Code example</h4>
<p>
Set the <code>displayMember</code> property.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox({displayMember: 'firstName'});</code></pre>
<p>
Get the <code>displayMember</code> property.
</p>
<pre><code>var displayMember = $('#jqxComboBox').jqxComboBox('displayMember');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/mxcMP/">displayMember is set to "text"</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span9'>dropDownHorizontalAlignment</span>
</td>
<td>
<span>String</span>
</td>
<td>'left'
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the DropDown's alignment.
</p>
<b>Possible Values:</b>
<br />
<pre><code>'left'</code></pre>
<pre><code>'right'</code></pre>
<h4>Code example</h4>
<pre><code>$('#jqxComboBox').jqxComboBox({ dropDownHorizontalAlignment: 'right'}); </code></pre>
<p>
Get the <code>dropDownHorizontalAlignment</code> property.
</p>
<pre><code>var dropDownHorizontalAlignment = $('#jqxComboBox').jqxComboBox('dropDownHorizontalAlignment');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/D75g6/">dropDownHorizontalAlignment is set to "right"</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span85'>dropDownVerticalAlignment</span>
</td>
<td>
<span>String</span>
</td>
<td>'bottom'
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the DropDown's alignment.
</p>
<b>Possible Values:</b>
<br />
<pre><code>'top'</code></pre>
<pre><code>'bottom'</code></pre>
<h4>Code example</h4>
<pre><code>$('#jqxComboBox').jqxComboBox({ dropDownVerticalAlignment: 'top'}); </code></pre>
<p>
Get the <code>dropDownVerticalAlignment</code> property.
</p>
<pre><code>var dropDownVerticalAlignment = $('#jqxComboBox').jqxComboBox('dropDownVerticalAlignment');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/tvz2u1pd/">dropDownVerticalAlignment is set to "top"</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span26'>dropDownHeight</span>
</td>
<td>
<span>Number</span>
</td>
<td>200
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the height of the jqxComboBox's ListBox displayed in the widget's DropDown.
</p>
<h4>Code example</h4>
<p>
Set the <code>dropDownHeight</code> property.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox({dropDownHeight: 250}); </code></pre>
<p>
Get the <code>dropDownHeight</code> property.
</p>
<pre><code>var dropDownHeight = $('#jqxComboBox').jqxComboBox('dropDownHeight');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/frsCK/">dropDownHeight is set to "300px"</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span28'>dropDownWidth</span>
</td>
<td>
<span>Number</span>
</td>
<td>200
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the width of the jqxComboBox's ListBox displayed in the widget's DropDown.
</p>
<h4>Code example</h4>
<p>
Set the <code>dropDownWidth</code> property.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox({dropDownWidth: 250}); </code></pre>
<p>
Get the <code>dropDownWidth</code> property.
</p>
<pre><code>var dropDownWidth = $('#jqxComboBox').jqxComboBox('dropDownWidth');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/UuVTx/">dropDownWidth is set to "300px"</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span7'>enableHover</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>true
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Enables/disables the hover state.
</p>
<h4>Code example</h4>
<p>
Set the <code>enableHover</code> property.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox({enableHover: false}); </code></pre>
<p>
Get the <code>enableHover</code> property.
</p>
<pre><code>var enableHover = $('#jqxComboBox').jqxComboBox('enableHover');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/pPpZ6/">enableHover is set to false</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span8'>enableSelection</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>true
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Enables/disables the selection.
</p>
<h4>Code example</h4>
<p>
Set the <code>enableSelection</code> property.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox({enableSelection:false}); </code></pre>
<p>
Get the <code>enableSelection</code> property.
</p>
<pre><code>var enableSelection = $('#jqxComboBox').jqxComboBox('enableSelection');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/p4E9F/">enableSelection is set to false</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span32'>enableBrowserBoundsDetection</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets whether the dropdown detects the browser window's bounds and automatically adjusts the dropdown's position.
</p>
<h4>Code example</h4>
<p>
Set the <code>enableBrowserBoundsDetection</code> property.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox({enableBrowserBoundsDetection: false}); </code></pre>
<p>
Get the <code>enableBrowserBoundsDetection</code> property.
</p>
<pre><code>var enableBrowserBoundsDetection = $('#jqxComboBox').jqxComboBox('enableBrowserBoundsDetection');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/r4sLr/">enableBrowserBoundsDetection is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span2'>height</span>
</td>
<td>
<span>Number/String</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the jqxComboBox height.
</p>
<h4>Code example</h4>
<p>
Set the <code>height</code> property.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox({ height: '250px' });
</code></pre>
<p>
Get the <code>height</code> property.
</p>
<pre><code>var height = $('#jqxComboBox').jqxComboBox('height');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/FM3Kr/">height is set to '25px'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span10'>itemHeight</span>
</td>
<td>
<span>Number</span>
</td>
<td>-1
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the height of the jqxComboBox Items. When the itemHeight == - 1,
each item's height is equal to its desired height.
</p>
<h4>Code example</h4>
<p>
Set with the <code>itemHeight</code> property.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox({itemHeight: 25}); </code></pre>
<p>
Get the <code>itemHeight</code> property.
</p>
<pre><code>var itemHeight = $('#jqxComboBox').jqxComboBox('itemHeight');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/qtF2f/">itemHeight is set to 25</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span80'>multiSelect</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Determines whether the jqxComboBox is in multi-select mode.
</p>
<h4>Code example</h4>
<p>
Set the <code>multiSelect</code> property.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox({multiSelect: true }); </code></pre>
<p>
Get the <code>multiSelect</code> property.
</p>
<pre><code>var multiSelect = $('#jqxComboBox').jqxComboBox('multiSelect');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/91f9jq5w/">multiSelect is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span46'>minLength</span>
</td>
<td>
<span>Number</span>
</td>
<td>2
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
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.
</p>
<h4>Code example</h4>
<p>
Set the <code>minLength</code> property.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox({minLength: 3 }); </code></pre>
<p>
Get the <code>minLength</code> property.
</p>
<pre><code>var minLength = $('#jqxComboBox').jqxComboBox('minLength');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/hGdTX/">minLength is set to 2</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span38'>openDelay</span>
</td>
<td>
<span>Number</span>
</td>
<td>350
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the delay of the 'open' animation.
</p>
<h4>Code example</h4>
<p>
Set the <code>openDelay</code> property
</p>
<pre><code>$('#jqxComboBox').jqxComboBox({openDelay: 200});
</code></pre>
<p>
Get the <code>openDelay</code> property.
</p>
<pre><code>var openDelay = $('#jqxComboBox').jqxComboBox('openDelay');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/MZZYV/">openDelay is set to 2000</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span73'>popupZIndex</span>
</td>
<td>
<span>Number</span>
</td>
<td>20000
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the popup's z-index.
</p>
<h4>Code example</h4>
<p>
Set the <code>popupZIndex</code> property.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox({popupZIndex: 999999});</code></pre>
<p>
Get the <code>popupZIndex</code> property.
</p>
<pre><code>var zIndex = $('#jqxComboBox').jqxComboBox('popupZIndex'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/R6bqL/">popupZIndex is set to 999</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span72'>placeHolder</span>
</td>
<td>
<span>String</span>
</td>
<td>""
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the input field's place holder.
</p>
<h4>Code example</h4>
<p>
Set the <code>placeHolder</code> property.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox({placeHolder: "Enter text" });</code></pre>
<p>
Get the <code>placeHolder</code> property.
</p>
<pre><code>var placeHolder = $('#jqxComboBox').jqxComboBox('placeHolder'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/n9EWq/">placeHolder is set to "Enter text"</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span40'>remoteAutoComplete</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
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.
</p>
<h4>Code example</h4>
<p>
Set the <code>remoteAutoComplete</code> property.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox({remoteAutoComplete: true }); </code></pre>
<p>
Get the <code>remoteAutoComplete</code> property.
</p>
<pre><code>var remoteAutoComplete = $('#jqxComboBox').jqxComboBox('remoteAutoComplete');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/EmYsZ/">remoteAutoComplete is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span47'>remoteAutoCompleteDelay</span>
</td>
<td>
<span>Number</span>
</td>
<td>300
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Determines the delay between two keystrokes. The search callback function is called on timeout. The value is specified in milliseconds.
</p>
<h4>Code example</h4>
<p>
Set the <code>remoteAutoCompleteDelay</code> property.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox({remoteAutoCompleteDelay: 500 }); </code></pre>
<p>
Get the <code>remoteAutoCompleteDelay</code> property.
</p>
<pre><code>var remoteAutoCompleteDelay = $('#jqxComboBox').jqxComboBox('remoteAutoCompleteDelay');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/MQC6J/">remoteAutoCompleteDelay is set to 300</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span44'>renderer</span>
</td>
<td>
<span>function</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Callback function which is called when an item is rendered. By using the renderer function, you can customize the look of the list items.
</p>
<h4>Code example</h4>
<p>
Set the <code>renderer</code> property
</p>
<pre><code> $('#jqxComboBox').jqxComboBox({renderer: function (index, label, value) {
var datarecord = data[index];
return datarecord.firstname + " " + datarecord.lastname;
}
});
</code></pre>
<p>
Get the <code>renderer</code> property.
</p>
<pre><code>var renderer = $('#jqxComboBox').jqxComboBox('renderer');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Pk7SP/">renderer is set to a custom rendering function</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span45'>renderSelectedItem</span>
</td>
<td>
<span>function</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
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.
</p>
<h4>Code example</h4>
<p>
Set the <code>renderSelectedItem</code> property
</p>
<pre><code> renderSelectedItem: function(index, item)
{
var item = dataAdapter.records[index];
if (item != null) {
var label = item.name + ", " + item.countryName + ", " + item.adminName1;
return label;
}
return "";
}
</code></pre>
<p>
Get the <code>renderSelectedItem</code> property.
</p>
<pre><code>var renderSelectedItem = $('#jqxComboBox').jqxComboBox('renderSelectedItem');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/v6WqF/">renderSelectedItem is set to a custom rendering function</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span69'>rtl</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.</p>
<h4>Code example</h4>
<p>
Set the <code>rtl</code> property.
</p>
<pre><code>$('#jqxComboBox').jqxComboBox({rtl : true}); </code></pre>
<p>
Get the <code>rtl</code> property.
</p>
<pre><code>var rtl = $('#jqxComboBox').jqxComboBox('rtl'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/VP4Jy/">rtl is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span4'>selectedIndex</span>
</td>
<td>
<span>Number</span>
</td>
<td>-1
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the selected index.
</p>
<h4>Code example</h4>
<p>
Set the <code>selectedIndex</code> property.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox({selectedIndex: 2 }); </code></pre>
<p>
Get the <code>selectedIndex</code> property.
</p>
<pre><code>var selectedIndex = $('#jqxComboBox').jqxComboBox('selectedIndex');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/2AwtN/">selectedIndex is set to 2</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span83'>showArrow</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>true
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Determines whether the jqxComboBox shows its dropdown button.
</p>
<h4>Code example</h4>
<p>
Set the <code>showArrow</code> property.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox({showArrow: false }); </code></pre>
<p>
Get the <code>showArrow</code> property.
</p>
<pre><code>var showArrow = $('#jqxComboBox').jqxComboBox('showArrow');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/96xn4wu4/">showArrow is set to false</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span81'>showCloseButtons</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>true
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Determines whether the jqxComboBox shows the items close buttons in multi-select mode.
</p>
<h4>Code example</h4>
<p>
Set the <code>showCloseButtons</code> property.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox({showCloseButtons: false }); </code></pre>
<p>
Get the <code>showCloseButtons</code> property.
</p>
<pre><code>var showCloseButtons = $('#jqxComboBox').jqxComboBox('showCloseButtons');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/49Lvr8wj/">showCloseButtons is set to false</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span3'>searchMode</span>
</td>
<td>
<span>String</span>
</td>
<td>startswith
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets 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.
</p>
<b>Possible Values:</b>
<br />
<pre><code>'none'</code></pre>
<pre><code>'contains'</code></pre>
<pre><code>'containsignorecase'</code></pre>
<pre><code>'equals'</code></pre>
<pre><code>'equalsignorecase'</code></pre>
<pre><code>'startswithignorecase'</code></pre>
<pre><code>'startswith'</code></pre>
<pre><code>'endswithignorecase'</code></pre>
<pre><code>'endswith'</code></pre>
<h4>Code example</h4>
<p>
Set the <code>searchMode</code> property.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox({searchMode: 'contains' }); </code></pre>
<p>
Get the <code>searchMode</code> property.
</p>
<pre><code>var searchMode = $('#jqxComboBox').jqxComboBox('searchMode');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/JhPAu/">searchMode is set to 'endswith'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span43'>search</span>
</td>
<td>
<span>function</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Callback function which is called when the 'remoteAutoComplate' property is set to true and the user types into the ComboBox's input field.
</p>
<h4>Code example</h4>
<p>
Set the <code>search</code> property.
</p>
<pre><code>
$("#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();
}
});
</code></pre>
<p>
Get the <code>search</code> property.
</p>
<pre><code>var search = $('#jqxComboBox').jqxComboBox('search');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/pSPSS/">search property is set to a custom function</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span5'>source</span>
</td>
<td>
<span>Array</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the items source.
</p>
<h4>Code example</h4>
<p>
Set a jqxComboBox with the <code>source</code> property.
</p>
<pre><code>var data = [</code></pre>
<pre><code>"Affogato",</code></pre>
<pre><code>"Americano",</code></pre>
<pre><code>"Bicerin"</code></pre>
<pre><code>];</code></pre>
<pre><code>$("#jqxComboBox").jqxComboBox({source: data});</code></pre>
<br />
Binding using the jqx.dataAdapter(requires jqxdata.js):
<pre><code>
// 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});
</code></pre>
<p>
Get the <code>source</code> property.
</p>
<pre><code>var source = $('#jqxComboBox').jqxComboBox('source');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/5SnVH/">source is set to dataAdapter</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span6'>scrollBarSize</span>
</td>
<td>
<span>Number</span>
</td>
<td>17
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the scrollbars size.
</p>
<h4>Code example</h4>
<p>
Set the <code>scrollBarSize</code> property.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox({scrollBarSize:25}); </code></pre>
<p>
Get the <code>scrollBarSize</code> property.
</p>
<pre><code>var scrollBarSize = $('#jqxComboBox').jqxComboBox('scrollBarSize');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/kyZxY/">scrollBarSize is set to 10</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span86'>template</span>
</td>
<td>
<span>String</span>
</td>
<td>'default'
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Determines the button's template as an alternative of the default styles.
</p>
<b>Possible Values:</b>
<br />
<pre><code>'default' - the default template. The style depends only on the "theme" property value.</code></pre>
<pre><code>'primary' - dark blue style for extra visual weight.</code></pre>
<pre><code>'success' - green style for successful or positive action.</code></pre>
<pre><code>'warning' - orange style which indicates caution.</code></pre>
<pre><code>'danger' - red style which indicates a dangerous or negative action.</code></pre>
<pre><code>'info' - blue button, not tied to a semantic action or use.</code></pre>
<h4>Code examples</h4>
<p>
Set the <code>template</code> property.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox({ template: 'primary'});</code></pre>
<p>
Get the <code>template</code> property.
</p>
<pre><code>var template = $('#jqxComboBox').jqxComboBox('template');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/a8prra4o/">template is set to 'success'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span67'>theme</span>
</td>
<td>
<span>String</span>
</td>
<td>''
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets the widget's theme.
</p>
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:
<ul>
<li>Include the theme's CSS file after jqx.base.css.<br />
The following code example adds the 'energyblue' theme.
<pre><code>
<pre><code><link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
</code></pre>
</code></pre>
</li>
<li>Set the widget's theme property to 'energyblue' when you initialize it.
</li>
</ul>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/tJd7Q/">theme is set to 'energyblue'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span82'>validateSelection</span>
</td>
<td>
<span>Function</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Determines whether an item can be selected in multi-select mode.
</p>
<h4>Code example</h4>
<p>
Set the <code>validateSelection</code> property.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox({validateSelection: function(itemValue)
{
if (itemValue == "Breve")
{
return false;
}
return true;
}
}); </code></pre>
<p>
Get the <code>validateSelection</code> property.
</p>
<pre><code>var validateSelection = $('#jqxComboBox').jqxComboBox('validateSelection');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/kg9bxL83/">validateSelection is set to a custom function</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span36'>valueMember</span>
</td>
<td>
<span>String</span>
</td>
<td>""
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets 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.
</p>
<h4>Code example</h4>
<p>
Set the <code>valueMember</code> property.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox({valueMember: 'lastName'});</code></pre>
<p>
Get the <code>valueMember</code> property.
</p>
<pre><code>var valueMember = $('#jqxComboBox').jqxComboBox('valueMember');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/hnfuM/">valueMember is set to "value"</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span1'>width</span>
</td>
<td>
<span>Number/String</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the jqxComboBox's width.
</p>
<h4>Code example</h4>
<p>
Set the <code>width</code> property.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox({ width: '250px' });
</code></pre>
<p>
Get the <code>width</code> property.
</p>
<pre><code>var width = $('#jqxComboBox').jqxComboBox('width');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/LWsju/">width is set to '200px'</a>
</div>
</div>
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<h2 class="documentation-top-header">Events</h2>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span62'>bindingComplete</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the data binding operation is completed.
</p>
<h4>Code example</h4>
<p>
Bind to the <code>bindingComplete</code> event by type: jqxComboBox.
</p>
<pre><code>$("#jqxComboBox").on('bindingComplete', function (event) {});
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/UKG2p/">Bind to the bindingComplete event by type:jqxComboBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span54'>checkChange</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when an item is checked/unchecked.
</p>
<h4>Code example</h4>
<p>
Bind to the <code>checkChange</code> by type: jqxComboBox.
</p>
<pre><code>$("#jqxComboBox").on('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 = $("#jqxComboBox").jqxComboBox('getCheckedItems');
}
});
</code></pre>
The item object has the following fields:
<br />
<ul>
<li>label - gets item's label.</li>
<li>value - gets the item's value.</li>
<li>disabled - gets whether the item is enabled/disabled.</li>
<li>checked - gets whether the item is checked/unchecked.</li>
<li>hasThreeStates - determines whether the item's checkbox supports three states.</li>
<li>html - gets the item's display html. This can be used instead of label.</li>
<li>index - gets the item's index.</li>
<li>group - gets the item's group.</li>
</ul>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/AgqgF/">Bind to the checkChange event by type:jqxComboBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span13'>close</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the popup ListBox is closed.
</p>
<h4>Code example</h4>
<p>
Bind to the <code>close</code> by type: jqxComboBox.
</p>
<pre><code>$('#jqxComboBox').on('close', function (event) { // Some code here. });
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/x4k5V/">Bind to the close event by type:jqxComboBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span12'>change</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the user selects an item.
</p>
<h4>Code example</h4>
<p>
Bind to the <code>change</code> by type: jqxComboBox.
</p>
<pre><code>$('#jqxComboBox').on('change', function (event)
{
var args = event.args;
if (args) {
// index represents the item's index.
var index = args.index;
var item = args.item;
// get item's label and value.
var label = item.label;
var value = item.value;
var type = args.type; // keyboard, mouse or null depending on how the item was selected.
}
});
</code></pre>
The item object has the following fields:
<br />
<ul>
<li>label - gets item's label.</li>
<li>value - gets the item's value.</li>
<li>disabled - gets whether the item is enabled/disabled.</li>
<li>checked - gets whether the item is checked/unchecked.</li>
<li>hasThreeStates - determines whether the item's checkbox supports three states.</li>
<li>html - gets the item's display html. This can be used instead of label.</li>
<li>index - gets the item's index.</li>
<li>group - gets the item's group.</li>
</ul>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/EBGEz/">Bind to the change event by type:jqxComboBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span11'>open</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the popup ListBox is opened.
</p>
<h4>Code example</h4>
<p>
Bind to the <code>open</code>
</p>
<pre><code>$('#jqxComboBox').on('open', function (event) { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/KXNmU/">Bind to the open event by type:jqxComboBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span27'>select</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the user selects an item.
</p>
<h4>Code example</h4>
<p>
Bind to the <code>select</code> event by type: jqxComboBox.
</p>
<pre><code>$('#jqxComboBox').on('select', function (event)
{
var args = event.args;
if (args) {
// index represents the item's index.
var index = args.index;
var item = args.item;
// get item's label and value.
var label = item.label;
var value = item.value;
var type = args.type; // keyboard, mouse or null depending on how the item was selected.
}
});
</code></pre>
The item object has the following fields:
<br />
<ul>
<li>label - gets item's label.</li>
<li>value - gets the item's value.</li>
<li>disabled - gets whether the item is enabled/disabled.</li>
<li>checked - gets whether the item is checked/unchecked.</li>
<li>hasThreeStates - determines whether the item's checkbox supports three states.</li>
<li>html - gets the item's display html. This can be used instead of label.</li>
<li>index - gets the item's index.</li>
<li>group - gets the item's group.</li>
</ul>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Na8cU/">Bind to the select event by type:jqxComboBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span15'>unselect</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the user unselects an item.
</p>
<h4>Code example</h4>
<p>
Bind to the <code>unselect</code> event by type: jqxComboBox.
</p>
<pre><code>$('#jqxComboBox').on('unselect', function (event)
{
var args = event.args;
if (args) {
// index represents the item's index.
var index = args.index;
var item = args.item;
// get item's label and value.
var label = item.label;
var value = item.value;
}
});
</code></pre>
The item object has the following fields:
<br />
<ul>
<li>label - gets item's label.</li>
<li>value - gets the item's value.</li>
<li>disabled - gets whether the item is enabled/disabled.</li>
<li>checked - gets whether the item is checked/unchecked.</li>
<li>hasThreeStates - determines whether the item's checkbox supports three states.</li>
<li>html - gets the item's display html. This can be used instead of label.</li>
<li>index - gets the item's index.</li>
<li>group - gets the item's group.</li>
</ul>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/JyHm3/">Bind to the unselect event by type:jqxComboBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<h2 class="documentation-top-header">Methods</h2>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span31'>addItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Adds a new item to the jqxComboBox. Returns 'true', if the new item is added or 'false' if the item is not added.
</p>
<br />
The following fields can be used for the new item:
<ul>
<li>label - determines the item's label.</li>
<li>value - determines the item's value.</li>
<li>disabled - determines whether the item is enabled/disabled.</li>
<li>checked - determines whether item is checked/unchecked.</li>
<li>hasThreeStates - determines whether the item's checkbox supports three states.</li>
<li>html - determines the item's display html. This can be used instead of label.</li>
<li>group - determines the item's group.</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>item</em></td>
<td>Object/String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>addItem</code> method.
</p>
<pre><code>// @param String</code></pre>
<pre><code>$("#jqxComboBox").jqxComboBox('addItem', 'jQuery' ); </code></pre>
<h4>Code example 2</h4>
<p>
Invoke the <code>addItem</code> method.
</p>
<pre><code>// @param Object</code></pre>
<pre><code>$("#jqxComboBox").jqxComboBox('addItem', { label: 'Text' value: 'Id'} ); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/HPYRS/">adds an item in the jqxComboBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span75'>clear</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Clears all items.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>clear</code> method.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox('clear'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/KMhW6/">clears all the items in the jqxComboBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span22'>clearSelection</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Clears all selected items.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>clearSelection</code> method.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox('clearSelection'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/3RJEU/">clears the selection in the jqxComboBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span41'>clear</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Clears all items.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>clear</code> method.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox('clear'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Vxg32/">clears all items in the jqxComboBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span23'>close</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Hides the popup listbox.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>close</code> method.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox("close" ); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/CfMGs/">closes jqxComboBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span48'>checkIndex</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Checks a list item when the 'checkboxes' property value is true. The index is zero-based, i.e to check the first item, the 'checkIndex' method should be called with parameter 0.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>index</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>checkIndex</code> method. The example code below, checks the first list item.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox('checkIndex', 0); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/YS9V3/">checks a box in the jqxComboBox</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span64'>checkItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Checks an item.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>item</em></td>
<td>Object/String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the c<code>checkItem</code>eckItem method.
</p>
<pre><code>// @param list Item</code></pre>
<pre><code>$("#jqxComboBox").jqxComboBox('checkItem', item ); </code></pre>
<br />
*To get an item, use the getItem or getItemByValue methods.
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/VvXsa/">checks an item in the jqxComboBox</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span53'>checkAll</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Checks all list items when the 'checkboxes' property value is true.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>checkAll</code> method.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox('checkAll'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/8s9pW/">checks all of the items in the jqxComboBox</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span68'>destroy</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Destroys the widget.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>destroy</code> method.
</p>
<pre><code>$('#jqxComboBox').jqxComboBox('destroy'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/55Tkz/">destroys the jqxComboBox</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span76'>disableItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Disables an item. Item is an Object.
</p>
<br />
The following fields can be used for the item:
<ul>
<li>label - determines the item's label.</li>
<li>value - determines the item's value.</li>
<li>disabled - determines whether the item is enabled/disabled.</li>
<li>checked - determines whether item is checked/unchecked.</li>
<li>hasThreeStates - determines whether the item's checkbox supports three states.</li>
<li>html - determines the item's display html. This can be used instead of label.</li>
<li>group - determines the item's group.</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>item</em></td>
<td>Object/String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>disableItem</code> method.
</p>
<pre><code>// @param Number</code></pre>
<pre><code>$("#jqxComboBox").jqxComboBox('disableItem', "jQuery" ); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/mNgKg/">disables an items in the jqxComboBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span77'>disableAt</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Disables an item by index. Index is a number.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>index</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>disableAt</code> method.
</p>
<pre><code>// @param Number</code></pre>
<pre><code>$("#jqxComboBox").jqxComboBox('disableAt', 8 ); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Bf86d/">disables an items in the jqxComboBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span78'>enableItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Enables an item. Item is an Object.
</p>
<br />
The following fields can be used for the item:
<ul>
<li>label - determines the item's label.</li>
<li>value - determines the item's value.</li>
<li>disabled - determines whether the item is enabled/disabled.</li>
<li>checked - determines whether item is checked/unchecked.</li>
<li>hasThreeStates - determines whether the item's checkbox supports three states.</li>
<li>html - determines the item's display html. This can be used instead of label.</li>
<li>group - determines the item's group.</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>item</em></td>
<td>Object/String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>enableItem</code> method.
</p>
<pre><code>// @param Number</code></pre>
<pre><code>$("#jqxComboBox").jqxComboBox('enableItem', "jQuery" ); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/uPjrj/">enables an items in the jqxComboBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span79'>enableAt</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Enables a disabled item by index. Index is a number.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>index</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>enableAt</code> method.
</p>
<pre><code>// @param Number</code></pre>
<pre><code>$("#jqxComboBox").jqxComboBox('enableAt', 3 ); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Bf86d/">enables an items in the jqxComboBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span18'>ensureVisible</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Ensures that an item is visible. index is number. When necessary, the jqxComboBox
scrolls to the item to make it visible.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>index</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>ensureVisible</code> method.
</p>
<pre><code>// @param Number</code></pre>
<pre><code>$("#jqxComboBox").jqxComboBox('ensureVisible', 2 ); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/q54fR/">ensures the visibility of an items in the jqxComboBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span58'>focus</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets the focus to the widget.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>focus</code> method.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox('focus');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/eHRcy/">focuses the jqxComboBox</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span20'>getItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Gets item by index. The returned value is an Object with the following fields:
</p>
Item Fields
<ul>
<li>label - gets item's label.</li>
<li>value - gets the item's value.</li>
<li>disabled - gets whether the item is enabled/disabled.</li>
<li>checked - gets whether the item is checked/unchecked.</li>
<li>hasThreeStates - determines whether the item's checkbox supports three states.</li>
<li>html - gets the item's display html. This can be used instead of label.</li>
<li>index - gets the item's index.</li>
<li>group - gets the item's group.</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>index</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Object</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>getItem</code> method.
</p>
<pre><code>// @param Number</code></pre>
<pre><code>var item = $("#jqxComboBox").jqxComboBox('getItem', 1 ); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/2k0gh9kz/">gets the an items by its index in the jqxComboBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span61'>getItemByValue</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Gets an item by its value. The returned value is an Object with the following fields:
</p>
<ul>
<li>label - gets item's label.</li>
<li>value - gets the item's value.</li>
<li>disabled - gets whether the item is enabled/disabled.</li>
<li>checked - gets whether the item is checked/unchecked.</li>
<li>hasThreeStates - determines whether the item's checkbox supports three states.</li>
<li>html - gets the item's display html. This can be used instead of label.</li>
<li>index - gets the item's index.</li>
<li>group - gets the item's group.</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>value</em></td>
<td>String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Object</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>getItemByValue</code> method.
</p>
<pre><code>// @param Value</code></pre>
<pre><code>var item = $("#jqxComboBox").jqxComboBox('getItemByValue', "Bon app'");</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/84FBT/">gets the an items by its value in the jqxComboBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span70'>getVisibleItems</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Gets all items displayed in the ComboBox. The method could be useful for getting the currently visible items after auto complete. The returned value is an array of Items.
</p>
Each item represents an Object with the following fields.
<br />
Item Fields
<ul>
<li>label - gets item's label.</li>
<li>value - gets the item's value.</li>
<li>disabled - gets whether the item is enabled/disabled.</li>
<li>checked - gets whether the item is checked/unchecked.</li>
<li>hasThreeStates - determines whether the item's checkbox supports three states.</li>
<li>html - gets the item's display html. This can be used instead of label.</li>
<li>index - gets the item's index.</li>
<li>group - gets the item's group.</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Array</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>getVisibleItems</code> method.
</p>
<pre><code>var items = $("#jqxComboBox").jqxComboBox('getVisibleItems'); </code></pre>
<p>Get the first item.</p>
<pre><code>var items = $("#jqxComboBox").jqxComboBox('getVisibleItems'); var firstItem = items[0];</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/tHdmn/">returns an Array of the visible items and displays the first 2 of them </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span30'>getItems</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Gets all items. The returned value is an array of Items.
</p>
Each item represents an Object with the following fields.
<br />
Item Fields
<ul>
<li>label - gets item's label.</li>
<li>value - gets the item's value.</li>
<li>disabled - gets whether the item is enabled/disabled.</li>
<li>checked - gets whether the item is checked/unchecked.</li>
<li>hasThreeStates - determines whether the item's checkbox supports three states.</li>
<li>html - gets the item's display html. This can be used instead of label.</li>
<li>index - gets the item's index.</li>
<li>group - gets the item's group.</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Array</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>getItems</code> method.
</p>
<pre><code>var items = $("#jqxComboBox").jqxComboBox('getItems'); </code></pre>
<br />
<p>Get the first item.</p>
<pre><code>var items = $("#jqxComboBox").jqxComboBox('getItems'); var firstItem = items[0];</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/PufD2/">returns an Array of all items and displays the first 2 of them </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span57'>getCheckedItems</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Gets the checked items. The returned value is an array of Items.
</p>
Each item represents an Object with the following fields.
<br />
Item Fields
<ul>
<li>label - gets item's label.</li>
<li>value - gets the item's value.</li>
<li>disabled - gets whether the item is enabled/disabled.</li>
<li>checked - gets whether the item is checked/unchecked.</li>
<li>hasThreeStates - determines whether the item's checkbox supports three states.</li>
<li>html - gets the item's display html. This can be used instead of label.</li>
<li>index - gets the item's index.</li>
<li>group - gets the item's group.</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Array</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>getCheckedItems</code> method.
</p>
<pre><code>var items = $("#jqxComboBox").jqxComboBox('getCheckedItems'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/JLVdF/">returns an Array of all checked items and displays them </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span33'>getSelectedItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Gets the selected item. The returned value is an Object or null(if there is no selected item).
</p>
<br />
Item Fields
<ul>
<li>label - gets item's label.</li>
<li>value - gets the item's value.</li>
<li>disabled - gets whether the item is enabled/disabled.</li>
<li>checked - gets whether the item is checked/unchecked.</li>
<li>hasThreeStates - determines whether the item's checkbox supports three states.</li>
<li>html - gets the item's display html. This can be used instead of label.</li>
<li>index - gets the item's index.</li>
<li>group - gets the item's group.</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Object</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>getSelectedItem</code> method.
</p>
<pre><code>// @param Number</code></pre>
<pre><code>var item = $("#jqxComboBox").jqxComboBox('getSelectedItem'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/3ytjs/">returns the selected item and displays it </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span84'>getSelectedItems</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Gets the selected items when "multiselect" is turned on. The returned value is an Array with Objects.
</p>
<br />
Each object has the following fields
<ul>
<li>label - gets item's label.</li>
<li>value - gets the item's value.</li>
<li>disabled - gets whether the item is enabled/disabled.</li>
<li>checked - gets whether the item is checked/unchecked.</li>
<li>hasThreeStates - determines whether the item's checkbox supports three states.</li>
<li>html - gets the item's display html. This can be used instead of label.</li>
<li>index - gets the item's index.</li>
<li>group - gets the item's group.</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Array</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>getSelectedItems</code> method.
</p>
<pre><code>var items = $("#jqxComboBox").jqxComboBox('getSelectedItems'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/vep5xcen/">returns the selected items</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span34'>getSelectedIndex</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Gets the index of the selected item. The returned value is the index of the selected item. If there's no selected item, -1 is returned.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Number</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>getSelectedIndex</code> method.
</p>
<pre><code>// @param Number</code></pre>
<pre><code>var index = $("#jqxComboBox").jqxComboBox('getSelectedIndex'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/fwCqh/">returns the selected item's index and displays it </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span37'>insertAt</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Inserts a new item to the jqxComboBox. Returns 'true', if the new item is inserted or false if the insertaion fails. The first parameter is Object or String - the new item. The second parameter is Number - the item's index.
</p>
The following fields can be used for the new item:
<ul>
<li>label - determines the item's label.</li>
<li>value - determines the item's value.</li>
<li>disabled - determines whether the item is enabled/disabled.</li>
<li>checked - determines whether item is checked/unchecked.</li>
<li>hasThreeStates - determines whether the item's checkbox supports three states.</li>
<li>html - determines the item's display html. This can be used instead of label.</li>
<li>group - determines the item's group.</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>item</em></td>
<td>Object/String</td>
<td></td>
</tr>
<tr>
<td><em>index</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>insertAt</code> method.
</p>
<pre><code>// @param String</code></pre>
<pre><code>// @param Number</code></pre>
<pre><code>$("#jqxComboBox").jqxComboBox('insertAt', 'jQuery', 1 ); </code></pre>
<h4>Code example 2</h4>
<p>
Invoke the <code>insertAt</code> method.
</p>
<pre><code>// @param Object</code></pre>
<pre><code>// @param Number</code></pre>
<pre><code>$("#jqxComboBox").jqxComboBox('insertAt', '{ label: 'Text' value: 'Id'}, 1 ); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/PQZGp/">inserts an item in the jqxComboBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span71'>isOpened</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Returns true, if the popup is opened. Otherwise returns false.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Boolean</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>isOpened</code> method.
</p>
<pre><code>var opened = $("#jqxComboBox").jqxComboBox('isOpened' ); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/whLMa/">check whether the jqxComboBox is opened</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span52'>indeterminateIndex</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Indeterminates a list item when the 'checkboxes' property value is true. The index is zero-based, i.e to indeterminate the first item, the 'indeterminateIndex' method should be called with parameter 0.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>index</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>indeterminateIndex</code> method. The example code below, indeterminates the first list item.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox('indeterminateIndex', 0); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/RPsQF/">indeterminates a box in the jqxComboBox</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span66'>indeterminateItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Indeterminates an item.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>item</em></td>
<td>Object/String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>indeterminateItem</code> method.
</p>
<pre><code>// @param list Item</code></pre>
<pre><code>$("#jqxComboBox").jqxComboBox('indeterminateItem', item ); </code></pre>
<br />
*To get an item, use the getItem or getItemByValue methods.
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/st8rp/">indeterminate an item in the jqxComboBox</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span51'>loadFromSelect</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Loads list items from a 'select' tag.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>selectTagId</em></td>
<td>String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>loadFromSelect</code> method.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox('loadFromSelect', 'select');</code></pre>
<br />
'select' is the id of a select tag.
Code Example:
<pre style='margin: 10px;' class='code'> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><select style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'height: 25px; width: 200px; margin-left: 30px;' id='select'</span>></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><option></span>Affogato<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></option></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><option></span>Americano<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></option></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><option></span>Bicerin<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></option></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><option></span>Breve<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></option></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><option></span>Café Bombón<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></option></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><option></span>Caffé Corretto<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></option></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><option></span>Café Crema<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></option></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><option></span>Caffé Latte<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></option></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><option></span>Caffé macchiato<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></option></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><option></span>Café mélange<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></option></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><option></span>Coffee milk<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></option></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><option></span>Cafe mocha<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></option></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><option></span>Cappuccino<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></option></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><option></span>Carajillo<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></option></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><option></span>Cuban espresso<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></option></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><option></span>Espresso<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></option></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><option></span>The Flat White<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></option></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><option></span>Frappuccino<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></option></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><option></span>Galao<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></option></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><option></span>Greek frappé coffee<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></option></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><option></span>Iced Coffee<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></option></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><option></span>Indian filter coffee<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></option></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><option></span>Instant coffee<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></option></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><option></span>Irish coffee<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></option></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><option></span>Liqueur coffee<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></option></span><div /> <span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></select></span><div /></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/CTQJq/">loads list items from a 'select' tag.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span24'>open</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Shows the popup listbox.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>open</code> method.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox('open' ); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/JDveu/">opens jqxComboBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span14'>removeItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Removes an item from the listbox. Parameter type: Object returned by the "getItem" method or String - the value of an item. Returns 'true', if the item is removed or 'false', if the
item is not removed.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>item</em></td>
<td>Object/String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>removeItem</code> method.
</p>
<pre><code>// @param Object</code></pre>
<pre><code>$("#jqxComboBox").jqxComboBox('removeItem', "List Item" ); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/nSmJn/">removes an item in the jqxComboBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span16'>removeAt</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Removes an item from the listbox. Parameter type: Number - the index of the item. The method returns 'true', if the item is removed or 'false', if the
item is not removed.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>index</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>removeAt</code> method.
</p>
<pre><code>// @param Number</code></pre>
<pre><code>$("#jqxComboBox").jqxComboBox('removeAt', 3 ); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/nEDGR/">removes an item in the jqxComboBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span19'>selectIndex</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Selects an item by index. The index is zero-based, i.e to select the first item, the 'selectIndex' method should be called with parameter 0.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>index</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>selectIndex</code> method.
</p>
<pre><code>// @param Number</code></pre>
<pre><code>$("#jqxComboBox").jqxComboBox('selectIndex', 0 ); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/m3X5G/">select an item by its index in the jqxComboBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span60'>selectItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Selects an item.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>item</em></td>
<td>Object/String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>selectItem</code> method.
</p>
<pre><code>// @param List Item</code></pre>
<pre><code>$("#jqxComboBox").jqxComboBox('selectItem', item ); </code></pre>
*To get an item, use the getItem or getItemByValue methods.
<br />
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ZayKP/">select an item in the jqxComboBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span17'>updateItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Updates an item. The first parameter is the new item. The second parameter could be an existing item or the value of an existing item.
</p>
<br />
The following fields can be used for the item:
<ul>
<li>label - determines the item's label.</li>
<li>value - determines the item's value.</li>
<li>disabled - determines whether the item is enabled/disabled.</li>
<li>checked - determines whether item is checked/unchecked.</li>
<li>hasThreeStates - determines whether the item's checkbox supports three states.</li>
<li>html - determines the item's display html. This can be used instead of label.</li>
<li>group - determines the item's group.</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>item</em></td>
<td>Object/String</td>
<td></td>
</tr>
<tr>
<td><em>itemValue</em></td>
<td>String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>updateItem</code> method.
</p>
<pre><code>// @param Object</code></pre>
<pre><code>// @param Object</code></pre>
<pre><code>$("#jqxComboBox").jqxComboBox('updateItem', { label: "Text", value: "Id1" }, "Antonio Moreno Taquera");</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/er2US/">updates an item in the jqxComboBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span74'>updateAt</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Updates an item. The first parameter is the new item. The second parameter is the index of the item to be updated.
</p>
<br />
The following fields can be used for the item:
<ul>
<li>label - determines the item's label.</li>
<li>value - determines the item's value.</li>
<li>disabled - determines whether the item is enabled/disabled.</li>
<li>checked - determines whether item is checked/unchecked.</li>
<li>hasThreeStates - determines whether the item's checkbox supports three states.</li>
<li>html - determines the item's display html. This can be used instead of label.</li>
<li>group - determines the item's group.</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>item</em></td>
<td>Object/String</td>
<td></td>
</tr>
<tr>
<td><em>index</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>updateAt</code> method.
</p>
<pre><code>// @param Number</code></pre>
<pre><code>$("#jqxComboBox").jqxComboBox('updateAt', { label: "Text", value: "Id1" }, 3 );</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/MeB5L/">updates an item in the jqxComboBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span21'>unselectIndex</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Unselects item by index. The index is zero-based, i.e to unselect the first item, the 'unselectIndex' method should be called with parameter 0.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>index</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>unselectIndex</code> method.
</p>
<pre><code>// @param Number</code></pre>
<pre><code>$("#jqxComboBox").jqxComboBox('unselectIndex', 5 ); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/z4SJm/">unselect an item by its index in the jqxComboBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span63'>unselectItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Unselects an item.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>item</em></td>
<td>Object/String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>unselectItem</code> method.
</p>
<pre><code>// @param List Item</code></pre>
<pre><code>$("#jqxComboBox").jqxComboBox('unselectItem', item ); </code></pre>
*To get an item, use the getItem or getItemByValue methods.
<br />
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/qXb7B/">unselect an item in the jqxComboBox </a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span49'>uncheckIndex</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Unchecks a list item when the 'checkboxes' property value is true. The index is zero-based, i.e to uncheck the first item, the 'uncheckIndex' method should be called with parameter 0.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>index</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>uncheckIndex</code> method. The example code below, unchecks the first list item.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox('uncheckIndex', 0); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/pqRX2/">unchecks a box in the jqxComboBox</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span65'>uncheckItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Unchecks an item.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>item</em></td>
<td>Object/String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>uncheckItem</code> method.
</p>
<pre><code>// @param list Item</code></pre>
<pre><code>$("#jqxComboBox").jqxComboBox('uncheckItem', item ); </code></pre>
<br />
*To get an item, use the getItem or getItemByValue methods.
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/wjZEm/">unchecks an item in the jqxComboBox</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span55'>uncheckAll</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Unchecks all list items when the 'checkboxes' property value is true.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>uncheckAll</code> method.
</p>
<pre><code>$("#jqxComboBox").jqxComboBox('uncheckAll'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/H2gAZ/">unchecks all of the items in the jqxComboBox</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span59'>val</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the selected value.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>value(optional)</em></td>
<td>String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>String</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>val</code> method.
</p>
// Get the value.
<pre><code>var value = $("#jqxComboBox").jqxComboBox('val');</code></pre>
// Get the value using jQuery's val()
<pre><code>var value = $("#jqxComboBox").val();</code></pre>
// Set value.
<pre><code>$("#jqxComboBox").jqxComboBox('val', 'New Value');</code></pre>
// Set value using jQuery's val().
<pre><code>$("#jqxComboBox").val('New Value');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/efNXk/">sets or gets the selected value in the jqxComboBox</a>
</div>
</div>
</td>
</tr>
</table>
<br />
</div>
</body>
</html>