jQuery UI Widgets Forums Editors Input, Password Input, TextArea, ColorPicker, Rating, TagCloud, Loader How To get selected label's value onSelect using jqxInput

This topic contains 4 replies, has 2 voices, and was last updated by  samratsaha2 8 years, 11 months ago.

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

  • samratsaha2
    Participant

    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);

    });


    Nadezhda
    Participant

    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,
    Nadezhda

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


    samratsaha2
    Participant

    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.handle

    here 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);

    });


    Nadezhda
    Participant

    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,
    Nadezhda

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


    samratsaha2
    Participant

    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 ๐Ÿ™‚

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

You must be logged in to reply to this topic.