jQWidgets Forums

Tagged: ListBox, remote search

This topic contains 2 replies, has 3 voices, and was last updated by Batsebah 9 years, 3 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

ListBox remote search XML Data Posts
June 10, 2014 at 10:14 pm ListBox remote search XML Data #55669

Gopre400
Participant

Hi I have a listbox that is based on XML data (call from webservice) and I would like to use remote search function of ListBox. Is there a way to do that? The I’m combining elements of data adaptor, is this correct?

Also the remote search uses a “_startsWith” method, is there a “_Contains” method?

source =
{
datatype: “xml”,
datafields: [
{ name: ‘ProjectKey’ },
{ name: ‘ProjectID’ },
{ name: ‘ProjectName’ },
],
async: false,
record: ‘Table’,
url: ‘CNSTWebService.asmx/GetCNSTProjectNotConnectedList’
};

var dataAdapter = new $.jqx.dataAdapter(source,
{ contentType: ‘application/json; charset=utf-8’,
formatData: function (data) {
data.ProjectName_startsWith = $(“#searchField”).val();
return data;
}
}
);

$(“#listBoxA”).jqxListBox({
allowDrop: true,
allowDrag: true,
source: dataAdapter,
width: 300,
height: 250,
displayMember: “ProjectName”,
valueMember: “ProjectKey”,
renderer: function (index, label, value) {
var item = dataAdapter.records[index];
if (item != null) {
var label = item.ProjectName;
return label;
}
return “”;
}
});

June 11, 2014 at 6:06 am ListBox remote search XML Data #55689

Peter Stoev
Keymaster

Hi Gopre400,

Whether it is starts with, contains or something else depends on your Server code, not from jqxListBox. My understanding is that you have to send the search field’s value to a server, the server should return appropriate data and the listbox should display it. Ex: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxlistbox/remotesearch.htm?arctic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 22, 2016 at 12:59 pm ListBox remote search XML Data #81681

Batsebah
Participant

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>
Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.