jQuery UI Widgets › Forums › Lists › ComboBox › ComboBox with remote and groups

Tagged: , , , , , , ,

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    ComboBox with remote and groups Posts
  • October 3, 2014 at 7:17 pm 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?

    October 7, 2014 at 8:25 am 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/

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.