jQWidgets Forums

Tagged: displayMember, Input, jqxinput, key, valueMember

This topic contains 9 replies, has 4 voices, and was last updated by Peter Stoev 11 years, 5 months ago.

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

Author

jqxInput auto-Complete Posts
December 6, 2013 at 11:07 am jqxInput auto-Complete #46089
gw.roee.bachar
Participant
I’m trying to use the jqxInput auto-complete feature, my data is local and has the following structure:
array of objects
```
[
	{Ship_Code: 'abc',   Ship_Name: 'cba'},
	{Ship_Code: 'abcd',  Ship_Name: 'dcba'},
	{Ship_Code: 'abcde', Ship_Name: 'edcba'}
]  
```
What am I missing in the following example:
```
<!DOCTYPE html>
<html class="no-overflow">
	<head>
		<meta charset="UTF-8">

		<title>Example</title>

		
		<link rel="stylesheet" type="text/css" href="../lib-jqwidgets/styles/jqx.base.css"/>
		<link rel="stylesheet" type="text/css" href="../lib-jqwidgets/styles/jqx.orange.css"/>

		
		<script type="text/javascript" src="../lib-scripts/jquery-1.10.2.min.js"></script>

		
		<script type="text/javascript" src="../lib-jqwidgets/jqxcore.js"></script>
		<script type="text/javascript" src="../lib-jqwidgets/jqx-all.js"></script>

		<script type="text/javascript">
			$(document).ready(function () {
				var src = new $.jqx.dataAdapter({
					datatype: 'json',
					datafields: [
						{name: 'Ship_Code', type: 'string'},
						{name: 'Ship_Name', type: 'string'}
					],
					localdata: [
						{Ship_Code: 'abc',   Ship_Name: 'cba'},
						{Ship_Code: 'abcd',  Ship_Name: 'dcba'},
						{Ship_Code: 'abcde', Ship_Name: 'edcba'}
					]
				});

				$('#id-text').jqxInput({
					rtl: false,
					theme: 'orange',
					source: src,
					height: '25px',
					width: '200px'
				});
			});
		</script>
	</head>

	<body>
		<label>Enter ship code:
			<input id="id-text" type="text">
		</label>
	</body>
</html>
```
December 6, 2013 at 11:34 am jqxInput auto-Complete #46093
Dimitar
Participant
Hello gw.roee.bachar,

You should also set the widget’s displayMember and valueMember properties, as shown in the demo Binding to JSON Data. And in your case:
```
$('#id-text').jqxInput({
    rtl: false,
    theme: 'orange',
    source: src,
    height: '25px',
    width: '200px',
    displayMember: 'Ship_Name',
    valueMember: 'Ship_Code'
});
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
December 6, 2013 at 12:32 pm jqxInput auto-Complete #46104

gw.roee.bachar
Participant

Hi Dimitar,

I’ve added displayMember and valueMember and the example still doesn’t work.
Have you tried it?

Thanks,
Roee

December 6, 2013 at 1:15 pm jqxInput auto-Complete #46110
Dimitar
Participant
Hi Roee,

You should also change the datatype to “array”, as shown in this working example, based on your own:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this demo the jqxInput is bound to JSON data.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.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/jqxinput.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var src = new $.jqx.dataAdapter({
                    datatype: 'array',
                    datafields: [{
                        name: 'Ship_Code',
                        type: 'string'
                    }, {
                        name: 'Ship_Name',
                        type: 'string'
                    }],
                    localdata: [{
                        'Ship_Code': 'abc',
                        'Ship_Name': 'cba'
                    }, {
                        'Ship_Code': 'abcd',
                        'Ship_Name': 'dcba'
                    }, {
                        'Ship_Code': 'abcde',
                        'Ship_Name': 'edcba'
                    }]
                });

                $('#id-text').jqxInput({
                    rtl: false,
                    theme: 'orange',
                    displayMember: 'Ship_Name',
                    valueMember: 'Ship_Code',
                    source: src,
                    height: '25px',
                    width: '200px'
                });
            });
        </script>
        <input id="id-text" />
    </div>
</body>
</html>
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
December 6, 2013 at 8:07 pm jqxInput auto-Complete #46132
gw.roee.bachar
Participant
Thanks Dimitar,
The change of datatype to ‘array’ fix the problem and now autocomplete show results.

When I move from this small example to my code not all fields in my localdata are recognized as string and I get the error Uncaught TypeError: Object #<Object> has no method ‘toUpperCase’ and no data displayed.

to fix that I explicitly added cast to String the function containsIgnoreCase
From:
```
containsIgnoreCase: function (b, c) {
        if (b == null || c == null) {
            return false
        }
        return b.toUpperCase().indexOf(c.toUpperCase()) != -1
    }
```
To:
```
containsIgnoreCase: function (b, c) {
        if (b == null || c == null) {
            return false
        }
        return String(b).toUpperCase().indexOf(c.toUpperCase()) != -1
    }
```
any idea what is missing here?

Roee
December 6, 2013 at 10:02 pm jqxInput auto-Complete #46134

Peter Stoev
Keymaster

Hi Roee,

Please, post a sample which reproduces the behavior which you describe with jQWidgets ver.3.0.4, then we would be able to test it. At present, we would not be able to answer to your question in the way it is asked. If “toUpperCase” is missing, then I would suggest you to check whether you set or not the “type” member of the source object’s data fields.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

December 7, 2013 at 5:27 pm jqxInput auto-Complete #46156

gw.roee.bachar
Participant

Hello Peter,

It would be difficult for me to create example for my issue.
Will it be acceptable by you to connect remotely to my computer?

Regards,
Roee

December 8, 2013 at 4:21 pm jqxInput auto-Complete #46160

Peter Stoev
Keymaster

Hi Roee,

No, that would not be possible.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

December 26, 2013 at 7:20 am jqxInput auto-Complete #46961

ziggy
Participant

Hi Peter,

I been trying to crack this nut for so long… I can’t seem to get through the loadComplete callback part. What am I missing here?

$(“#input”).jqxInput({ placeHolder: “Enter name…”, minLength: 1, width: 250, height: 23, theme: theme,
displayMember: ‘LastName’,
valueMember: ‘ShortName’,
source: function (query, response) {
var dataAdapter = new $.jqx.dataAdapter
(
{
datatype: “jsonp”,
datafields:
[
{ name: ‘LastName’ , type: ‘string’ },
{ name: ‘FirstName’ , type: ‘string’},
{ name: ‘ShortName’, type: ‘string’ }
],

url: “../Content/ldap2.txt”,
data:
{
featureClass: “P”,
style: “full”,
maxRows: 12
}
},
{
autoBind: true,
formatData: function (data) {
data.name_startsWith = query;
return data;
},
loadComplete: function (data) {

if (data.UserModelLDAP.length > 0) {
response($.map(data.UserModelLDAP, function (item) {
return {
label: item.FirstName,
value: item.ShortName
}
}));
}
}
}
);
}
});

Need help please.

Thanks!

Karen

December 26, 2013 at 8:51 am jqxInput auto-Complete #46973

Peter Stoev
Keymaster

Hi Karen,

The code that you use seems to not correctly perform Data Binding. You use things which are copy-pasted from our sample like ‘featureClass’, ‘maxRows’ – these are variables that the Service we use it the sample expects. Also the data source is ‘jsonp’, but your URL points to a resource which is in the same domaing. May be the data source should be ‘json’ in that case.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/
Author

Posts

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

You must be logged in to reply to this topic.