Blogs

In this post, we will show you how to implement a basic search in remote data by using an Input element and the jqxListBox widget. We’ll use the ListBox to display the results. The provided results are cities, displayed when at least two characters are entered into the Input field.

1. Add the JavaScript and CSS files.

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

2. Add the HTML structure. We need to have at least HTML Input element and a DIV tag for the jqxListBox.

<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
<div>
  <span style='float: left; margin-top: 5px; margin-right: 4px;'>Search: </span>
  <input class='jqx-input' id='searchField' type="text" style="height: 23px; float: left; width: 223px;" /> 
</div>
<div style="clear: both;"></div>
<div style="margin-top: 10px;" id="jqxlistbox"></div>

3. Create a new instance of the jqxDataAdapter plug-in. The datasource is the geonames.org webservice. Before each request, the search string will be assigned in the formatData callback of the jqxDataAdapter.

// prepare the data
var source =
{
	datatype: "jsonp",
	datafields: [
		{ name: 'countryName' },
		{ name: 'name' },
		{ name: 'population', type: 'float' },
		{ name: 'continentCode' },
		{ name: 'adminName1' }
	],
	url: "http://ws.geonames.org/searchJSON",
	data: {
		featureClass: "P",
		style: "full",
		maxRows: 12
	}
};
var dataAdapter = new $.jqx.dataAdapter(source,
	{
		formatData: function (data) {
			data.name_startsWith = $("#searchField").val();
			return data;
		}
	}
);

4. Create a new instance of the jqxListBox widget. The ListBox widget’s data source is the dataAdapter.

$("#jqxlistbox").jqxListBox(
{
	width: 280,
	height: 250,
	source: dataAdapter,
	theme: 'fresh',
	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 "";
	}
});

5. Update the data adapter when the value of the HTML Input element is changed. To make an update, we call the dataAdapter’s dataBind method.

var me = this;
$("#searchField").bind('keydown', function (event) {
	if ($("#searchField").val().length >= 2) {
		if (me.timer) clearTimeout(me.timer);
		me.timer = setTimeout(function () {
			dataAdapter.dataBind();
		}, 300);
	}
});