Jquery 使用搜索栏和下拉菜单筛选剑道列表视图

我的页面上有一个

剑道列表视图

，我希望能够使用一个自定义搜索栏和两个

剑道下拉列表

，允许用户过滤

列表视图

我在使用搜索栏或下拉菜单进行过滤时没有问题，但我在尝试找出如何能够同时使用这三种方法过滤数据时遇到了问题

例如，我希望能够在搜索中键入一些内容，并让它过滤搜索词。然后，对于显示的结果，我希望能够使用任一下拉列表过滤这些结果

我这里有一个完整的例子：

要进行测试，请在搜索栏中键入“测试”。你会注意到它会过滤到一个结果。现在展开“产品类型”下拉列表并选择“类型1”。注意它是如何显示该类型的所有产品的吗？它应该不会显示任何结果，因为我只想在当前的过滤器上应用该过滤器。

感谢您为我提供了一个指向他的问题的链接，该问题与我的问题非常相似，他能够找到解决方案。我对他的解决方案做了一点修改，使之适合我

然后，我只需在每个下拉列表和搜索框的更改事件中调用

applyClientFilters（）

函数，过滤效果非常好。

感谢您为我提供了一个指向他的问题的链接，该问题与我的问题非常相似，他能够找到解决方案。我对他的解决方案做了一点修改，使之适合我

---

然后，我只需在每个下拉列表和搜索框的更改事件中调用

applyClientFilters（）

函数，过滤效果很好。

我在尝试使用多个多选下拉列表过滤网格并使用答案解决问题时遇到了类似的问题。看看是否有帮助。：）使用退格键和其他键删除过滤器时，文本框不会触发过滤器。但是，我无法完整地阅读代码，我建议您将逻辑压缩为一个筛选器方法，并传入网格或数据源，让所有更改事件处理程序调用一个筛选器函数，该函数将检查所有字段，构建筛选器并将其应用于数据源。我阅读了上一段，并按照说明进行了操作。您正在正确处理所有事件，但是，您的产品下拉事件不会查找名称上是否存在筛选器。您必须在一个函数中处理两个或所有三个过滤器，才能按您希望的方式工作。@Sandman非常感谢您的链接/建议！我调整了你的功能以满足我的需要，现在它工作得很好。谢谢没问题，很乐意帮助：）我在尝试使用多个多选下拉菜单筛选网格并使用答案解决问题时遇到了类似的问题。看看是否有帮助。：）使用退格键和其他键删除过滤器时，文本框不会触发过滤器。但是，我无法完整地阅读代码，我建议您将逻辑压缩为一个筛选器方法，并传入网格或数据源，让所有更改事件处理程序调用一个筛选器函数，该函数将检查所有字段，构建筛选器并将其应用于数据源。我阅读了上一段，并按照说明进行了操作。您正在正确处理所有事件，但是，您的产品下拉事件不会查找名称上是否存在筛选器。您必须在一个函数中处理两个或所有三个过滤器，才能按您希望的方式工作。@Sandman非常感谢您的链接/建议！我调整了你的功能以满足我的需要，现在它工作得很好。谢谢没问题，很乐意帮忙：）

function applyClientFilters() {
    var listView = $("#ProductsList").data("kendoListView");
    var listViewDataSource = listView.dataSource;
    // clear existing datasource
    listViewDataSource.filter([]);
    // extract selected items from each of the dropdown controls and the search box
    var productType = $("#ProductTypeDropDown").data("kendoDropDownList").value();
    var therapeuticClass = $("#TherapeuticClassDropDown").data("kendoDropDownList").value();
    var searchString = $(".search-filter").val();
    // setup filter object (using and logic)
    var filter = {
        logic: "and",
        filters: [] // ready for filter from each of the dropdowns and search bar
    };
    // push new filter into array of filters with or logic on each filter
    if (productType.length > 0) {
        var productTypeFilter = {
            logic: "or",
            filters: [
                { field: "ProductTypeId", operator: "equals", value: productType }
            ]
        };
        filter.filters.push(productTypeFilter);
    }


    if (therapeuticClass.length > 0) {
        var therapeuticClassFilter = {
            logic: "or",
            filters: [
                {
                    field: "TherapeuticClasses",
                    operator: function (itemValue, value) {
                        return itemValue &&
                            itemValue.find(function (item) {
                                if (item.Name.toLowerCase().indexOf(value.toLowerCase()) !== -1) {
                                    return true;
                                } else {
                                    return false;
                                }
                            });
                    },
                    value: therapeuticClass
                }
            ]
        };
        filter.filters.push(therapeuticClassFilter);
    }

    if (searchString.length > 0) {
        var searchFilter = {
            logic: "or",
            filters: [
                { field: "Name", operator: "startswith", value: searchString },
                { field: "ProductTypeDisplay", operator: "startswith", value: searchString },
                { field: "NdcCode", operator: "startswith", value: searchString },
                {
                    field: "TherapeuticClasses",
                    operator: function(itemValue, value) {
                        return itemValue &&
                            itemValue.find(function(item) {
                                // If a therapeutic class name matches search then return true
                                if (item.Name.toLowerCase().indexOf(value.toLowerCase()) !== -1) {
                                    return true;
                                } else {
                                    return false;
                                }
                            });
                    },
                    value: searchString
                }
            ]
        };
        filter.filters.push(searchFilter);
    }

    // apply filter query to datasource
    listViewDataSource.query({
        filter: filter
    });
}