jQWidgets Forums

This topic contains 8 replies, has 2 voices, and was last updated by Peter Stoev 10 years, 4 months ago.

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

Author

Search not working… Posts

January 29, 2015 at 11:10 pm Search not working… #66192

Participant

I have modified the code for the remote search example of the listbox and the box comes up, along with the items from my json file. But as I type into the search box, nothing happens. I think it is something to do with the dataAdapter, but I am not sure. Thanks

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="keywords" content="jQuery DropDownList, List, ListBox, Popup List, jqxDropDownList, jqxListBox, List Widget, ListBox Widget, DropDownList Widget" /> 
<meta name="description" content="The jqxListBox represents a widget that contains a list of selectable items."/>
<title id='Description'>The jqxListBox represents a widget that contains a list of selectable items. </title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">  
<link rel="stylesheet" type="text/css" href="widgets/jqwidgets/styles/jqx.base.css">

<script src="widgets/scripts/jquery-1.11.1.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="widgets/jqwidgets/jqxcore.js"></script>
 <script type="text/javascript" src="widgets/jqwidgets/jqxdata.js"></script> 
<script src="widgets/jqwidgets/jqxbuttons.js"></script>
<script src="widgets/jqwidgets/jqxcheckbox.js"></script>
<script src="widgets/jqwidgets/jqxscrollbar.js"></script>
<script src="widgets/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript">
        $(document).ready(function () {
            
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'id', type: 'int' },
                    { name: 'fullname' },
                    { name: 'uname' },
                    { name: 'empno' }
                ],
				id: 'id',
                url: "searchItems.txt" , 
				data: {
					featureClass: "P",
					style: "full",
					maxRows: 12
				}              
            };
            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: "uname",
                valueMember: "fullname",
                renderer: function (index, label, value) {
                    var item = dataAdapter.records[index];
                    if (item != null) {
                        var label = item.uname + "(" + item.fullname + ", " + item.empno + ")";
                        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 Username 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>

January 30, 2015 at 7:34 am Search not working… #66204

Peter Stoev

Keymaster

Hi PackerNation,

It seems that you modified a working sample available online – http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxlistbox/remotesearch.htm?arctic. That’s ok, but from your code we do not know how we can help you because the part which is ours works, but we can’t know the data you’re trying to load and so we can’t tell whether your adapter initialization is OK or is not. I suggest you to check whether the “url” to your Data file is correct and whether the dataType is correct.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 30, 2015 at 2:40 pm 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" 
 }]

January 30, 2015 at 2:51 pm Search not working… #66233

Peter Stoev

Keymaster

Hi PackerNation,

Sorry, but If it says that it can’t the file then the url is not correct.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 30, 2015 at 3:58 pm 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

February 5, 2015 at 10:55 pm 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.

February 7, 2015 at 1:39 pm Search not working… #66727

Peter Stoev

Keymaster

Hi PackerNation,

This is as far as I see a sample with custom search field so how search is performed depends on how you handle the input’s value on your server.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

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

PackerNation

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 10, 2015 at 7:12 am Search not working… #66796

Peter Stoev

Keymaster

Hi PackerNation,

Sorry, but you’re not right. The sample is with ListBox and Input field – 2 very different HTML elements. According to the API, the searchMode is: Sets or gets the item incremental search mode. When the user types some text in a focused ListBox, the jqxListBox widget tries to find the searched item using the entered text and the selected search mode. . Note that this is not somethign related to an Input field in any way. The example which you’ve copied from our website shows how someone can type into an Input field and send Server requests with the specific data. When the server responds, the ListBox’s data source is updated through the dataAdapter. data.name_startsWith – this is custom parameter required for the Web Service used in the sample. For your implementation, this will most probably be something else unless you implement your server to listen to param with name “name_startsWith “.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.