jQuery UI Widgets Forums Editors Input, Password Input, TextArea, ColorPicker, Rating, TagCloud, Loader Input with Auto-Complete, Multiple Values, Binding to JSON Data

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

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

  • serge012374
    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;
    }
    });


    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/


    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


    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/


    serge012374
    Participant

    Thank you so much, Dimitar!


    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

    • This reply was modified 3 years, 1 month ago by  Wigginst.

    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/

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

You must be logged in to reply to this topic.