jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
958 lines (957 loc) • 204 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