Input with multiple values - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: data, Input, jqxinput, json, multiple, source, value, valueMember

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

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

Author

Input with multiple values Posts

October 6, 2014 at 7:45 pm Input with multiple values #60732

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?

October 7, 2014 at 5:23 am 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/

October 12, 2014 at 4:32 pm 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;
}));
}
}
}
);
}
});

October 13, 2014 at 9:57 am 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/

September 28, 2016 at 11:14 am 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

September 29, 2016 at 6:02 am 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/

Author

Posts

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

You must be logged in to reply to this topic.