jQWidgets Forums

Forum Replies Created

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

Author

Posts

February 9, 2015 at 2:57 pm in reply to: Search not working… Search not working… #66774

Participant

Thanks Peter. This last example I showed you is from your website. It is the source code displayed for the “remote search” example. According to the API I should be able to change the searchmode to ‘contains’, but that does not seem to work. I noticed in the dataAdapter there is a variable called data.name_startsWith, what is this?

Thanks

February 5, 2015 at 10:55 pm in reply to: Search not working… Search not working… #66653

PackerNation

Participant

So I am still trying to figure out the remote search feature of the listbox. I copied your example, and it works fine:

<!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: "jsonp",
                datafields: [
                    { name: 'countryName' },
                    { name: 'name' },
                    { name: 'population', type: 'float' },
                    { name: 'continentCode' },
                    { name: 'adminName1' }
                ],
                url: "http://api.geonames.org/searchJSON",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 50,
                    username: "jqwidgets"
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source,
                {
                    formatData: function (data) {
                        data.name_startsWith = $("#searchField").val();
                        return data;
                    }
                }
            );
            $("#jqxlistbox").jqxListBox(
            {
                width: 320,
                height: 350,
                source: dataAdapter, 
                selectedIndex: 0,
                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 "";
                }
            });
            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 for a City: </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>

How do I set the searchField searchMode to ‘containsignorecase’? If I set it in the listbox attributes it only works when the listbox has the focus, and it ignores the searchField.

January 30, 2015 at 3:58 pm in reply to: Search not working… Search not working… #66235

PackerNation

Participant

Sorry for the misunderstanding, it is finding the file fine. As a test, I renamed the file, without change the name in the code, and the expected error came up. I then went back to the original filename. All 9 of the names in the text file load into the listbox.

Thanks

January 30, 2015 at 2:40 pm in reply to: Search not working… Search not working… #66232

PackerNation

Participant

Thanks. The url to the data is correct. In Firebug, it shows that it can find the file (when I change the filename, I get an error). The listbox loads the 9 list items correctly with the data elements from the file, but when I go and type into the search box the results in the listbox do not get updated. Here is my text file:

[{
 "id": "1",
 "fullname": "Bob Smith",
 "uname": "Bsmith",
 "empno": "102478" 
 }, {
 "id": "2",
 "fullname": "Tom Smith",
 "uname": "Tsmith",
 "empno": "102588" 
 },{
 "id": "3",
 "fullname": "Robert Jones",
 "uname": "RJones",
 "empno": "112378" 
 },{
 "id": "4",
 "fullname": "Norbert Parker",
 "uname": "NParker",
 "empno": "109978" 
 },{
 "id": "5",
 "fullname": "Tim Small",
 "uname": "Tsmall",
 "empno": "194758" 
 },{
 "id": "7",
 "fullname": "Frank Toma",
 "uname": "FToma",
 "empno": "163248" 
 },{
 "id": "8",
 "fullname": "Fred North",
 "uname": "Fnorth",
 "empno": "102481" 
 },{
 "id": "9",
 "fullname": "Tran Cheiu",
 "uname": "tcheiu",
 "empno": "102999" 
 }]

December 11, 2014 at 5:05 pm in reply to: Grid crashes if more than 50 rows are returned Grid crashes if more than 50 rows are returned #64126

PackerNation

Participant

Nevermind, I found the issue it was with the data. One of the fields that gets pulled in is a user’s full name. I found that every time the grid crashed it was when the JSON data contained a name with a single quote in it (e.g. D’ Arrabba). Since JSON uses single quotes it was messing up the formatting.

Well, that was a pain in the butt!

Author

Posts

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