jQuery UI Widgets › Forums › Editors › Input, Password Input, TextArea, ColorPicker, Rating, TagCloud, Loader › How To get selected label's value onSelect using jqxInput
Tagged: auto-complete, Input, item, jqxinput, label, Uncaught TypeError: Cannot read property โitemโ of undefined, value
This topic contains 4 replies, has 2 voices, and was last updated by samratsaha2 9 years, 11 months ago.
-
Author
-
I am working with jqxinput autocomplete.
I need to get selected label’s key value when users select one item within autocomplete display listing.just like , regular select where , will display (SS, Sk etc ) but upon selection corresponding (12,13) value will be saved/selected actually.
<Select>
<option value=12>SS</option>
<option value=13>SK</option>
</select>Please see below code, the item within on-select returns undefined , please let me know what need to change to select a key when display value is being selected.
$(“#fl_address”).jqxInput({ placeHolder: “Enter a Address”, displayMember: “empName”, valueMember: “key”, height: 25, width: 200, theme: theme,
source: function (query, response) {
var dataAdapter = new $.jqx.dataAdapter
(
{
datatype: “json”,
datafields:
[{ name: ‘address’},
{ name: ‘name’},
{ name: ’empNo’}],
url: “$./app/getAddress”,
data:
{
wt: “json”,
indent: “true”,
queryString:”empNo:”+query+”*”,}
},
{
autoBind: true,
loadComplete: function (data) {
response($.map(data, function (item) {
return {
label: item.name,
value: item.no
}
}));
}
}
);
}
}).on(‘select’, function (event) {
var item = event.args.item;
alert(“value”+item.value);});
Hello samratsaha2,
Please, find the following example which shows how to get item value and item label. If this does not help, please provide us with more information.
<!DOCTYPE html> <html lang="en"> <head> <title></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/jqxinput.js"></script> </head> <body class='default'> <div id='content'> <script type="text/javascript"> $(document).ready(function () { var timer; $("#input").jqxInput({ placeHolder: "Enter a City", height: 25, width: 200, source: function (query, response) { var dataAdapter = new $.jqx.dataAdapter ( { 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: 12, username: "jqwidgets" } }, { autoBind: true, formatData: function (data) { data.name_startsWith = query; return data; }, loadComplete: function (data) { if (data.geonames.length > 0) { response($.map(data.geonames, function (item) { return { label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName, value: item.name } })); } } } ); } }); $('#input').on('select', function (event) { var item = event.args.item; alert('value: ' + item.value + " , " + "label: " + event.args.label); }); }); </script> <input type="text" id="input" /> </div> </body> </html>
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/I tried, but below error I am getting,
Uncaught TypeError: Cannot read property ‘item’ of undefined
update?locationID=6613&locationTypeID=135:623 Uncaught TypeError: Cannot read property ‘value’ of undefinedupdate?locationID=6613&locationTypeID=135:623 (anonymous function)jquery-1.11.1.min.js:3 m.event.dispatchjquery-1.11.1.min.js:3 m.event.add.r.handlejquery-1.11.1.min.js:3 m.event.triggerjquery-1.11.1.min.js:3 (anonymous function)jquery-1.11.1.min.js:2 m.extend.eachjquery-1.11.1.min.js:2 m.fn.m.eachjquery-1.11.1.min.js:3 m.fn.extend.triggerjqxinput.js:7 a.extend._raiseEventjqxinput.js:7 a.extend.selectjqxinput.js:7 a.extend.clickjquery-1.11.1.min.js:2 m.extend.proxy.m.isFunction.ejquery-1.11.1.min.js:3 m.event.dispatchjquery-1.11.1.min.js:3 m.event.add.r.handlehere is my modified code,
$(“#fl_address”).jqxInput({ placeHolder: “Enter a Address”, displayMember: “address”, valueMember: “latitude”+”:”+”longitude”, height: 25, width: 200, theme: theme,
source: function (query, response) {
var dataAdapter = new $.jqx.dataAdapter
(
{
datatype: “json”,
datafields:
[{ name: ‘address’},
{ name: ‘latitude’},
{ name: ‘longitude’}],
//url: “http://10.208.43.124:8983/solr/core1/select”,
url: “${pageContext.request.contextPath}/auto/getAddress”,
data:
{
wt: “json”,
indent: “true”,
queryString:”ADDR:”+query+”*”,
city:” +CITY:”+$(“#fl_city”).val(),
state:” +STATE:”+$(“#fl_state”).val()}
},
{
autoBind: true,
loadComplete: function (data) {
response($.map(data, function (item) {
return {
label: item.address,
value: item.address
}
}));
}
}
);
}
});$(“#fl_address”).on(‘select’, function (event) {
var item = event.args.item;
alert(“value”+item.value);});
Hi samratsaha2,
I suggest you to check if there is data like in our demo
if (data.geonames.length > 0)
. Please, make sure you are using the latest version of jQWidgets(3.7.1).Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/The below code worked fine :
$(“#fl_address”).jqxInput({ placeHolder: “Enter an Address”, height: 25, theme: theme,
source: function (query, response) {
var dataAdapter = new $.jqx.dataAdapter
(
{
datatype: “json”,
datafields:
[{ name: ‘address’},
{ name: ‘latitude’, type: ‘float’ },
{ name: ‘longitude’, type: ‘float’ }],
//url: “http://10.208.43.124:8983/solr/core1/select”,
url: “${pageContext.request.contextPath}/auto/getAddress”,
data:
{
wt: “jsonp”,
indent: “true”,
queryString:query,
city:$(“#fl_city”).val(),
state:$(“#fl_state”).val(),
zip:$(“#fl_zip”).val(),
country:$(“#fl_country”).val()
}
},
{
autoBind: true,
loadComplete: function (data) {
if(data.length > 0){
response($.map(data, function (item) {
return {
label: item.address,
value: item.latitude + “:” + item.longitude}
}))
}}
})
}
}).on(‘select’, function (event) {
var item = event.args;
var longitude = item.value.split(“:”)[1];
var latitude = item.value.split(“:”)[0];$(“#fl_address”).val(item.label);
……………….Thanks for all help ๐
-
AuthorPosts
You must be logged in to reply to this topic.