jQWidgets jqxComboBox renderSelectedItem Property

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful and optimized framework, platform-independent, and widely supported. The jqxComboBox is used to represent a jQuery ComboBox widget that contains an input field with autocomplete functionality and a list of selectable items displayed in a drop-down.

The renderSelectedItem property is a callback function that is invoked whenever a selected item from the stated combobox is rendered. Moreover, this function is helpful in customizing the displayed text in the input field of the combobox. It is of type function and its default value is "null".

Syntax:

• To set the renderSelectedItem property:

$('#selector').jqxComboBox({renderSelectedItem: function (i, itm) {
 var d_record = data[i];
 return d_record.name + " " + d_record.index;
 },
});

• To get the renderSelectedItem property:

var rsi = $('#selector').jqxComboBox('renderSelectedItem');

Linked Files: Download jQWidgets from the link. In the HTML file, locate the script files in the downloaded folder.

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcombobox.js”></script>

Example 1: The below example illustrates the jQWidgets jqxComboBox renderSelectedItem property.

Output:

Example 2: The following is another example of the jqxComboBox renderSelectedItem property in jQWidgets.

Output:

Reference: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxcombobox/jquery-combobox-api.htm?search=