具有可过滤多列的 Kendo UI 组合框答案

【问题标题】：Kendo UI combobox with filterable multi columns具有可过滤多列的 Kendo UI 组合框
【发布时间】：2015-01-13 22:53:41
【问题描述】：

我一直在尝试实现这一点，但没有成功。这是我的场景：

我需要实现一个启用文本的剑道组合框，这样你可以输入一些文本，它会找到任何匹配的记录，但是，如果我点击下拉箭头，它会在其中显示一个网格，所有匹配记录（部分搜索），它应该允许在列的标题中过滤。

我看到了 DropDownList 的示例，里面有一个网格，但是你不能在文本框中输入文本。

有没有人有关于如何实现这个的示例？

提前感谢您的回复

罗恩

【问题讨论】：

标签： javascript kendo-ui kendo-combobox

【解决方案1】：

我终于让它工作了，如果有人想知道如何实现这个，这里是演示

<html>
<head>
    <script src="script/jquery.min.js" type="text/javascript"></script>
    <script src="script/kendo.all.min.js" type="text/javascript"></script>

    <script>
        var rootElement;
        var grid;
        var comboBox;

        $(document).ready(function () {
            comboBox = $('#comboList').kendoComboBox({
                dataTextField:"name",
                dataValueField:"id",
                filter:"contains",
                open: function (e) {
                    if (!$(grid.element).hasClass("k-custom-visible")) {
                        $(grid.element).slideToggle("fast", function () {
                            comboBox.close();
                            var selectedValue = $('#comboList').closest("span").children("span").children("input").val(); // comboBox.value();

                            if (selectedValue.length > 0) {
                                var filter = new Array();
                                if (!isNaN(selectedValue)){
                                    filter.push({ field: "id", operator: "contains", value: selectedValue });
                                } else {
                                    filter.push({ field: "name", operator: "contains", value: selectedValue });
                                }
                                grid.dataSource.filter(filter);
                            } else {
                                grid.dataSource.filter([]);
                            }

                            $(grid.element).addClass("k-custom-visible");
                        });
                    }
                },
                change: function (e) {
                    if ($(grid.element).hasClass("k-custom-visible")) {
                        var selectedValue = $('#comboList').closest("span").children("span").children("input").val(); // comboBox.value();

                        if (selectedValue.length > 0) {
                            var filter = new Array();
                            if (!isNaN(selectedValue)) {
                                filter.push({ field: "id", operator: "contains", value: selectedValue });
                            } else {
                                filter.push({ field: "name", operator: "contains", value: selectedValue });
                            }
                            grid.dataSource.filter(filter);
                        } else {
                            grid.dataSource.filter([]);
                        }

                        $(grid.element).addClass("k-custom-visible");
                    }
                },
                dataSource: [
                    { name: "Cotton", id: "1" },
                    { name: "Polyester", id: "2" },
                    { name: "Cotton/Polyester", id: "3" },
                    { name: "Rib Knit", id: "4" }
                ]
            }).data("kendoComboBox");

            rootElement = $(comboBox.rootElement);

            grid = $("#grid").kendoGrid({
                dataSource: {
                    data:[
                        { name: "Cotton", id: "1" },
                        { name: "Polyester", id: "2" },
                        { name: "Cotton/Polyester", id: "3" },
                        { name: "Rib Knit", id: "4" }
                    ]
                },
                columns: [
                    {
                        title: "User Id",
                        field: "id"
                    },
                    {
                        title: "User Name",
                        field: "name"
                    }
                ],
                selectable: true,
                pageable: true,
                filterable: {
                    mode: "row"
                },
                change: function (e) {
                    var selected = $.map(this.select(), function(item){
                        return $(item)[0].cells[0].innerHTML;
                    });

                    comboBox.value(selected[0]);

                    $(grid.element).slideToggle('fast', function () {
                        $(grid.element).removeClass("k-custom-visible");
                    });
                }
            }).data("kendoGrid");

            $(grid.element).css({ "border": "1px solid grey", "display": "none", "position": "absolute" });

            $(grid.element).css({ "top": rootElement.position().top + rootElement.height(), "left": rootElement.position().left });
        });

        $(document).click(function (e) {`enter code here`
            // Ignore clicks on the grid.
            if (!$(e.target).hasClass("k-button") && !$(e.target).hasClass("k-textbox")) {
                if ($(e.target).closest("div.k-grid").length == 0 && $(e.target).closest(".k-grid-edit").length == 0 && $(e.target).closest(".k-grid-edit-row").length == 0) {
                    // If visible, then close the grid.
                    if ($(grid.element).hasClass("k-custom-visible")) {
                        $(grid.element).slideToggle('fast', function () {
                            $(grid.element).removeClass("k-custom-visible");
                        });
                    }
                }
            }
        });

    </script>
</head>
<body>
    <div>
        <input id="comboList" placeholder="Enter Name" />
        <div id="grid" style="width:800px; z-index:10;"></div>
    </div>
</body>
</html>

【讨论】：