jQWidgets Forums

Forum Replies Created

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • in reply to: ListBox remote search XML Data 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>


    Batsebah
    Participant

    Hi Ivailo

    Still nothing happens, it shows only listbox with scrollbar and highlighted bar upon moving the cursor inside the listbox. Appreciate your help.

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