Blogs

Let’s see how to add the jqxComboBox widget to a web page and populate it with remote data. We will use the Geonames JSONP Service to populate our ComboBox with data. 1. Add references to the JavaScript and CSS Stylesheet files.

<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.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>

2. Prepare the Data Source object. Set the url to point to the Geonames JSONP service. The datatype member should be set to ‘jsonp’ and we also specify the datafields array. Each datafield name is a name of a member in the data source. The data object specifies the custom data sent to the server.

 // prepare the data
var source =
{
	datatype: "jsonp",
	datafields: [
		{ name: 'countryName' },
		{ name: 'name' },
		{ name: 'population', type: 'float' },
		{ name: 'continentCode' }
	],
	url: "http://ws.geonames.org/searchJSON",
	data: {
		featureClass: "P",
		style: "full",
		maxRows: 50
	}
};

3. Create a new instance of the jqx.dataAdapter passing the source object as parameter.

var dataAdapter = new $.jqx.dataAdapter(source);

4. Add a DIV tag to your page.

<div id="jqxcombobox"></div>

5. Initialize the ComboBox. In this step, you need to select the ‘DIV’ tag with id=’jqxcombobox’ and then call the jqxComboBox constructor. The ‘width’ and ‘height’ properties set the ComboBox’s size. The ‘source’ property is set to the dataAdapter. The ComboBox will be populated with data coming from the dataAdapter. The ‘displayMember’ specifies the name of an object property to display and the ‘valueMember’ the name of an object property to set as a ‘value’ of the list items.

$("#jqxcombobox").jqxComboBox(
{
	width: 200,
	height: 25,
	source: dataAdapter,
	selectedIndex: 0,
	displayMember: "countryName",
	valueMember: "name"
});