jQWidgets Forums
Forum Replies Created
-
Author
-
February 22, 2016 at 12:59 pm in reply to: ListBox remote search XML Data ListBox remote search XML Data #81681
Hi Peter
When I tried to enter text on the Search box it does not update the listbox..Appreciate your help..below is the modified taken from above link.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>In this example is demonstrated how to use the jqxListBox with Search field. ListBox is automatically updated when a character is entered into the search field.</title>
<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/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=”../../scripts/demos.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘CompanyName’ },
{ name: ‘ContactName’ },
{ name: ‘ContactTitle’},
{ name: ‘Address’ },
{ name: ‘City’ }
],
url: “http://localhost:8080/Widgets/ListSearch/data.php”,
data: {
featureClass: “P”,
style: “full”,
maxRows: 50,
username: “jqwidgets”
}};
var dataAdapter = new $.jqx.dataAdapter(source,
{
ProcessData: function (data) {
data.name_startsWith = $(“#searchField”).val();
return data;
}
}
);$(“#jqxlistbox”).jqxListBox(
{
width: 320,
height: 350,
source: dataAdapter,
selectedIndex: 0,
displayMember: “ContactName”,
valueMember: “CompanyName”,
renderer: function (index, label, value) {
var item = dataAdapter.records[index];
if (item != null) {
var label = item.Address;// + “(” + item.ContactName + “, ” + item.Address + “)”;
return label;
}
return “”;
}
});var me = this;
$(“#searchField”).on(‘keyup’, function (event) {
if (me.timer) clearTimeout(me.timer);
me.timer = setTimeout(function () {
dataAdapter.dataBind();
}, 300);
});
});
</script></head>
<body class=’default’>
<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’ placeholder=”Type a City name here” id=’searchField’ type=”text” style=”height: 23px; float: left; width: 197px;” />
</div>
<div style=”clear: both;”></div>
<div style=”margin-top: 10px;” id=”jqxlistbox”></div>
</div>
</body>
</html>February 19, 2016 at 9:48 pm in reply to: Listbox Fills Empty Record From DB Listbox Fills Empty Record From DB #81629Hi Ivailo
Still nothing happens, it shows only listbox with scrollbar and highlighted bar upon moving the cursor inside the listbox. Appreciate your help.
-
AuthorPosts