jQuery UI Widgets Forums Lists ComboBox ComboBox with remote and groups

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 9 years, 4 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • ComboBox with remote and groups #60639

    nybblegroup
    Participant

    I need the combobox to work with remote search and the results to be grouped.
    I’m returning the results correctly from JSON using label and group elements.

    Using a single source as in the Categories example works fine, but it does not in the remote search.
    Is there an option or custom code to enable it?

    • This topic was modified 9 years, 4 months ago by  nybblegroup.
    ComboBox with remote and groups #60746

    Dimitar
    Participant

    Hello nybblegroup,

    This feature will be available in a future version of jQWidgets. Until then, you may try the following approach:

    <!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/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
    </head>
    <body>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    var sampleJSON = [{ label: "Parrot", group: "Animals" }, { label: "Cat", group: "Animals" }, { label: "Palm", group: "Plants" }, { label: "Peppermint", group: "Plants"}];
    
                    // prepare the data
                    var source =
                    {
                        datatype: "json",
                        datafields: [
                            { name: 'label' },
                            { name: 'group' }
                        ],
                        localdata: sampleJSON,
                        async: false
                    };
                    var dataAdapter = new $.jqx.dataAdapter(source, { autoBind: true, beforeLoadComplete: function (records) {
                        $("#jqxWidget").jqxComboBox({ source: records, width: '300', height: '25', selectedIndex: 0 });
                    }
                    });
                });
            </script>
            <div id='jqxWidget'>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.