This topic contains 5 replies, has 3 voices, and was last updated by  Dimitar 3 years, 6 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Input with multiple values #60732

    elbnacht
    Participant

    The jqxInput together with autocomplete works fine.
    I followed the example
    demos/jqxinput/bindingtojson.htm.
    The only drawback is, that only one valueMember is mentioned.
    What would be the solution, if I would need several values in this example?

    Input with multiple values #60741

    Dimitar
    Participant

    Hello elbnacht,

    Unfortunately, multiple valueMembers are not supported (not to be confused with the Multiple Values demo).

    A possible way of accomplishing this requirement is to have more datafields, representing the additional values, in your source. When you need the additional values, you may check the dataAdapter.records for the ContactName (label) you require and the record containing it would also contain all your custom values (CompanyName and the additional ones).

    Best Regards,
    Dimitar

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

    Input with multiple values #61011

    elbnacht
    Participant

    Thanks Dimitar,

    problem is, that I’m a little bit lost (and now tired) from lots of trials.
    Hope you can help me more in detail:

    I’ve the following code (picked up from an example):
    I want to use autocomplete – works fine together with some php and json.
    I get a simple json data set back from php. I want to pickup the label “aktie” and want to use furthermore some other data related to “aktie”, like isin or index.
    Using dataAdapter.records sound ok, I’ve seen, that it is used in autocomplete section.I just can’t figure out, how I exactly have to place it and return it.
    Please need your help again.

    Thanks Jens

    $(“#tag”).jqxInput({
    placeHolder: “Aktie”,
    displayMember: “aktie”,
    valueMember: “isin”,
    theme: ‘black’,
    width: 200,
    height: 25,
    source: function (query, response) {
    var dataAdapter = new $.jqx.dataAdapter({
    datatype: “json”,
    datafields: [
    { name: ‘aktie’, type: ‘string’},
    { name: ‘index’, type: ‘string’},
    { name: ‘isin’, type: ‘string’}
    ],
    url: ‘suggest_search.php’
    },
    {
    autoBind: true,
    formatData: function (data) {
    data.name_startsWith = query;
    return data;
    },
    loadComplete: function (data) {
    if (data.length > 0) {
    response($.map(data, function (item) {
    return item.aktie;
    }));
    }
    }
    }
    );
    }
    });

    Input with multiple values #61034

    Dimitar
    Participant

    Hi elbnacht,

    Here is an example, based on the demo Binding to JSON Data. Note that this solution assumes that each item has a unique label, which is used as a search key.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <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="../../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 url = "../sampledata/customers.txt";
    
                    // prepare the data
                    var source =
                    {
                        datatype: "json",
                        datafields: [
                            { name: 'CompanyName' },
                            { name: 'ContactName' },
                            { name: 'ContactTitle' },
                            { name: 'Address' }
                        ],
                        url: url
                    };
                    var dataAdapter = new $.jqx.dataAdapter(source);
    
                    // Create a jqxInput
                    $("#jqxInput").jqxInput({ source: dataAdapter, placeHolder: "Contact Name:", displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 25 });
                    $("#jqxInput").on('select', function (event) {
                        if (event.args) {
                            var item = event.args.item;
                            if (item) {
                                var contactTitle, address;
    
                                for (var i = 0; i < dataAdapter.records.length; i++) {
                                    if (item.label == dataAdapter.records[i].ContactName) {
                                        contactTitle = dataAdapter.records[i].ContactTitle;
                                        address = dataAdapter.records[i].Address;
                                        break;
                                    }
                                }
                                var valueelement = $("<div></div>");
                                valueelement.text("Value: " + item.value);
                                var labelelement = $("<div></div>");
                                labelelement.text("Label: " + item.label);
                                var contactTitleElement = $("<div></div>");
                                contactTitleElement.text("Contact Title: " + contactTitle);
                                var addressElement = $("<div></div>");
                                addressElement.text("Address: " + address);
    
                                $("#selectionlog").children().remove();
                                $("#selectionlog").append(labelelement);
                                $("#selectionlog").append(valueelement);
                                $("#selectionlog").append(contactTitleElement);
                                $("#selectionlog").append(addressElement);
                            }
                        }
                    });
                });
            </script>
            <input id="jqxInput" />
            <br />
            <label style="font-family: Verdana; font-size: 10px;">
                ex: Ana</label>
            <div style="font-family: Verdana; font-size: 13px;" id='selectionlog'>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    Input with multiple values #87764

    raj
    Participant

    Hi Dimitar,

    I tried the jqxInput multiple values example code posted here and it is working as expected and I would like to get both the “key”:”value” pair from the selected values in textbox. Let say, I set the displayMember and valueMember is set as Country & City.

    //In textbox I had chosen the country names like below
    Germany, Mexico, Sweden

    var url = "../sampledata/customers.txt";
    
    $("#jqxInput").jqxInput({ placeHolder: "Country Name:", displayMember: "Country", valueMember: "City" .. });
    
    //On button click, i'm getting a value from the textbox
    var list = $("jqxInput").jqxInput('value');

    Can you suggest me how to get “key”:”value” pair from the chosen values?

    Similar like getting values from listbox

    var items = $("#jqxListBox").jqxListBox('getItems');
    var log = "";
    for (var i = 0; i < items.length; i++) {
       log += items[i].label+" "+items[i].value;
    }

    Looking forward.

    Thanks & Regards,
    Senthil

    Input with multiple values #87784

    Dimitar
    Participant

    Hi Senthil,

    Please refer to the following example. We hope it is helpful to you:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <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="../../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>
        <script type="text/javascript">
            $(document).ready(function () {
                var data = [{ country: 'Germany', city: 'Berlin' }, { country: 'Mexico', city: 'Mexico City' }, { country: 'Sweden', city: 'Stockholm' }],
                    labels = [],
                    values = [],
                    countries = [];
    
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'country' },
                        { name: 'city' }
                    ],
                    localdata: data
                };
                var dataAdapter = new $.jqx.dataAdapter(source, {
                    autoBind: true,
                    loadComplete: function (records) {
                        for (var i = 0; i < records.length; i++) {
                            countries.push(records[i].country);
                        }
                    }
                });
    
                $("#input").jqxInput({
                    placeHolder: "Enter a Country", height: 25, width: 250,
                    source: function (query, response) {
                        var item = query.split(/,\s*/).pop();
                        // update the search query.
                        $("#input").jqxInput({ query: item });
                        response(countries);
                    },
                    renderer: function (itemValue, inputValue) {
                        var terms = inputValue.split(/,\s*/);
                        // remove the current input
                        terms.pop();
                        // add the selected item
                        terms.push(itemValue);
                        // add placeholder to get the comma-and-space at the end
                        terms.push("");
                        var value = terms.join(", ");
    
                        labels.push(itemValue);
                        for (var i = 0; i < dataAdapter.records.length; i++) {
                            if (dataAdapter.records[i].country === itemValue) {
                                values.push(dataAdapter.records[i].city);
                            }
                        }
    
                        $('#labels').text('Labels: ' + labels.join(', '));
                        $('#values').text('Values: ' + values.join(', '));
    
                        return value;
                    }
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='content'>
            <input type="text" id="input" />
            <div id="labels"></div>
            <div id="values"></div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.