Input with Auto-Complete, Multiple Values, Binding to JSON Data - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: auto-complete, AutoComplete, displayMember, Input, jqxinput, json, multiple, source, valueMember, values

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

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

Author

Input with Auto-Complete, Multiple Values, Binding to JSON Data Posts

April 25, 2014 at 4:40 pm Input with Auto-Complete, Multiple Values, Binding to JSON Data #53599

Participant

Hello!

Could you posibly provide an example of using the Input with Auto-Complete, Multiple Values, Binding to JSON Data at the same time?

I started from your Multiple Items example (provided below). I guess the key would be to use my data source in place of response(countries);

So far I can’t get it to work. The Auto-Complete works only the first time I select something, and then it doesn’t open anymore.

Could you lease help?

Thank you so much!

Sergey

$(“#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(“, “);
return value;
}
});

April 28, 2014 at 5:41 am Input with Auto-Complete, Multiple Values, Binding to JSON Data #53630

Dimitar

Participant

Hello serge012374,

Here is an example:

<!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.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>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "countries.txt";

            // prepare the data
            var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'name' }
                    ],
                    url: url
                };
            var countries = new Array();
            var dataAdapter = new $.jqx.dataAdapter(source, { autoBind: true, loadComplete: function (data) {
                for (var i = 0; i < data.length; i++) {
                    countries.push(data[i].name);
                };
            }
            });

            // Create a jqxInput
            $("#jqxInput").jqxInput({ source: dataAdapter, placeHolder: "Country:", width: 200, height: 25,
                source: function (query, response) {
                    var item = query.split(/,\s*/).pop();
                    // update the search query.
                    $("#jqxInput").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(", ");
                    return value;
                }
            });
        });
    </script>
</head>
<body>
    <input id="jqxInput" />
</body>
</html>

And here is the contents of countries.txt:

[ { "name": "Afghanistan" }, { "name": "Albania" }, { "name": "Algeria" }, { "name": "Andorra" }, { "name": "Angola" }, { "name": "Antarctica" }, { "name": "Antigua and Barbuda" }, { "name": "Argentina" }, { "name": "Armenia" }, { "name": "Australia" }, { "name": "Austria" }, { "name": "Azerbaijan" }, { "name": "Bahamas" }, { "name": "Bahrain" }, { "name": "Bangladesh" }, { "name": "Barbados" }, { "name": "Belarus" }, { "name": "Belgium" }, { "name": "Belize" }, { "name": "Benin" }, { "name": "Bermuda" }, { "name": "Bhutan" }, { "name": "Bolivia" }, { "name": "Bosnia and Herzegovina" }, { "name": "Botswana" }, { "name": "Brazil" }, { "name": "Brunei" }, { "name": "Bulgaria" }, { "name": "Burkina Faso" }, { "name": "Burma" }, { "name": "Burundi" }, { "name": "Cambodia" }, { "name": "Cameroon" }, { "name": "Canada" }, { "name": "Cape Verde" }, { "name": "Central African Republic" }, { "name": "Chad" }, { "name": "Chile" }, { "name": "China" }, { "name": "Colombia" }, { "name": "Comoros" }, { "name": "Congo, Democratic Republic" }, { "name": "Congo, Republic of the" }, { "name": "Costa Rica" }, { "name": "Cote d'Ivoire" }, { "name": "Croatia" }, { "name": "Cuba" }, { "name": "Cyprus" }, { "name": "CzechRepublic" }, { "name": "Denmark" }, { "name": "Djibouti" }, { "name": "Dominica" }, { "name": "DominicanRepublic" }, { "name": "EastTimor" }, { "name": "Ecuador" }, { "name": "Egypt" }, { "name": "ElSalvador" }, { "name": "EquatorialGuinea" }, { "name": "Eritrea" }, { "name": "Estonia" }, { "name": "Ethiopia" }, { "name": "Fiji" }, { "name": "Finland" }, { "name": "France" }, { "name": "Gabon" }, { "name": "Gambia" }, { "name": "Georgia" }, { "name": "Germany" }, { "name": "Ghana" }, { "name": "Greece" }, { "name": "Greenland" }, { "name": "Grenada" }, { "name": "Guatemala" }, { "name": "Guinea" }, { "name": "Guinea-Bissau" }, { "name": "Guyana" }, { "name": "Haiti" }, { "name": "Honduras" }, { "name": "HongKong" }, { "name": "Hungary" }, { "name": "Iceland" }, { "name": "India" }, { "name": "Indonesia" }, { "name": "Iran" }, { "name": "Iraq" }, { "name": "Ireland" }, { "name": "Israel" }, { "name": "Italy" }, { "name": "Jamaica" }, { "name": "Japan" }, { "name": "Jordan" }, { "name": "Kazakhstan" }, { "name": "Kenya" }, { "name": "Kiribati" }, { "name": "Korea, North" }, { "name": "Korea, South" }, { "name": "Kuwait" }, { "name": "Kyrgyzstan" }, { "name": "Laos" }, { "name": "Latvia" }, { "name": "Lebanon" }, { "name": "Lesotho" }, { "name": "Liberia" }, { "name": "Libya" }, { "name": "Liechtenstein" }, { "name": "Lithuania" }, { "name": "Luxembourg" }, { "name": "Macedonia" }, { "name": "Madagascar" }, { "name": "Malawi" }, { "name": "Malaysia" }, { "name": "Maldives" }, { "name": "Mali" }, { "name": "Malta" }, { "name": "MarshallIslands" }, { "name": "Mauritania" }, { "name": "Mauritius" }, { "name": "Mexico" }, { "name": "Micronesia" }, { "name": "Moldova" }, { "name": "Mongolia" }, { "name": "Morocco" }, { "name": "Monaco" }, { "name": "Mozambique" }, { "name": "Namibia" }, { "name": "Nauru" }, { "name": "Nepal" }, { "name": "Netherlands" }, { "name": "NewZealand" }, { "name": "Nicaragua" }, { "name": "Niger" }, { "name": "Nigeria" }, { "name": "Norway" }, { "name": "Oman" }, { "name": "Pakistan" }, { "name": "Panama" }, { "name": "PapuaNewGuinea" }, { "name": "Paraguay" }, { "name": "Peru" }, { "name": "Philippines" }, { "name": "Poland" }, { "name": "Portugal" }, { "name": "Qatar" }, { "name": "Romania" }, { "name": "Russia" }, { "name": "Rwanda" }, { "name": "Samoa" }, { "name": "SanMarino" }, { "name": "SaoTome" }, { "name": "SaudiArabia" }, { "name": "Senegal" }, { "name": "SerbiaandMontenegro" }, { "name": "Seychelles" }, { "name": "SierraLeone" }, { "name": "Singapore" }, { "name": "Slovakia" }, { "name": "Slovenia" }, { "name": "SolomonIslands" }, { "name": "Somalia" }, { "name": "SouthAfrica" }, { "name": "Spain" }, { "name": "SriLanka" }, { "name": "Sudan" }, { "name": "Suriname" }, { "name": "Swaziland" }, { "name": "Sweden" }, { "name": "Switzerland" }, { "name": "Syria" }, { "name": "Taiwan" }, { "name": "Tajikistan" }, { "name": "Tanzania" }, { "name": "Thailand" }, { "name": "Togo" }, { "name": "Tonga" }, { "name": "TrinidadandTobago" }, { "name": "Tunisia" }, { "name": "Turkey" }, { "name": "Turkmenistan" }, { "name": "Uganda" }, { "name": "Ukraine" }, { "name": "UnitedArabEmirates" }, { "name": "UnitedKingdom" }, { "name": "UnitedStates" }, { "name": "Uruguay" }, { "name": "Uzbekistan" }, { "name": "Vanuatu" }, { "name": "Venezuela" }, { "name": "Vietnam" }, { "name": "Yemen" }, { "name": "Zambia" }, { "name": "Zimbabwe" }]

Best Regards,
Dimitar

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

April 29, 2014 at 1:50 pm Input with Auto-Complete, Multiple Values, Binding to JSON Data #53723

serge012374

Participant

Thank you, Dimitar!

Could you please show one more example of the above, but using displayMember, and valueMember?

Thank you so much!

Sergey

April 30, 2014 at 6:08 am Input with Auto-Complete, Multiple Values, Binding to JSON Data #53757

Dimitar

Participant

Hi Sergey,

Here is an additional example, based on the demo Binding to JSON Data:

<!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.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 url = "../sampledata/customers.txt";

                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'CompanyName' },
                        { name: 'ContactName' }
                    ],
                    url: url
                };
                var names = new Array();
                var dataAdapter = new $.jqx.dataAdapter(source, { autoBind: true, loadComplete: function (data) {
                    for (var i = 0; i < data.length; i++) {
                        names.push({ label: data[i].ContactName, value: data[i].CompanyName });
                    };
                }
                });

                // Create a jqxInput
                $("#jqxInput").jqxInput({ placeHolder: "Contact Name:", displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 25,
                    source: function (query, response) {
                        var item = query.split(/,\s*/).pop();
                        // update the search query.
                        $("#jqxInput").jqxInput({ query: item });
                        response(names);
                    },
                    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(", ");
                        return value;
                    }
                });
                $("#jqxInput").on('select', function (event) {
                    if (event.args) {
                        var item = event.args.item;
                        if (item) {
                            var valueelement = $("<div></div>");
                            valueelement.text("Value: " + item.value);
                            var labelelement = $("<div></div>");
                            labelelement.text("Label: " + item.label);

                            $("#selectionlog").children().remove();
                            $("#selectionlog").append(labelelement);
                            $("#selectionlog").append(valueelement);
                        }
                    }
                });
            });
        </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/

May 4, 2014 at 5:02 pm Input with Auto-Complete, Multiple Values, Binding to JSON Data #53908

serge012374

Participant

Thank you so much, Dimitar!

February 16, 2017 at 6:40 pm Input with Auto-Complete, Multiple Values, Binding to JSON Data #91639

Wigginst

Participant

Dimitar,

Could you please have a look at my code and see why I’m getting the displayMember as the value?


            var url = "_data.aspx?qt=inputBox";

            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'studenName' },
                    { name: 'studentId' }
                ],
                url: url
            };
            var names = new Array();
            var dataAdapter = new $.jqx.dataAdapter(source, {
                autoBind: true, loadComplete: function (data) {
                    for (var i = 0; i < data.length; i++) {
                        names.push({ label: data[i].studentName, value: data[i].studentId });
                    };
                }
            });

            // Create a jqxInput
            $("#stuName").jqxInput({
                placeHolder: "Student Name:", displayMember: "studentName", valueMember: "studentId", width: 200, height: 25,
                source: function (query, response) {
                    var item = query.split(/,\s*/).pop();
                    // update the search query.
                    $("#stuName").jqxInput({ query: item});
                    response(names);
                },
                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(" ");
                    return value;
                }
            });

This is the code I’m using to pull the value.


            var temp = $('#stuName').jqxInput('val');
            alert(temp);

I’ve also tried the other method from the sites documentation.

Here a small sample of my JSON object.
[{"studentName" : "LastName, FirstName", "studentId" : "58449"}]

Thanks

February 17, 2017 at 7:22 am Input with Auto-Complete, Multiple Values, Binding to JSON Data #91657

Dimitar

Participant

Hello Wigginst,

Here is how you can achieve this: https://www.jseditor.io/?key=jqxinput-get-value-member. We hope this helps solve your issue.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.