ASP.NET MVC中Kendo UI MultiSelect实现单词首字符匹配自定义过滤

针对你需要的「输入内容时匹配字符串中任意单词开头」的需求，提供两种可行方案：

方案一：前端本地过滤（适合数据量较小的场景，如你的1000条数据） #

该方案将所有数据一次性加载到前端，通过自定义过滤逻辑实现单词开头匹配：

1. 修改MultiSelect的配置，关闭服务器端过滤并指定自定义过滤操作符：

@(Html.Kendo().MultiSelectFor(model => model.data)
        .Name("SampleData")
        .AutoClose(false)
        .MaxSelectedItems(10)
        .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("GetData", "SampleData");
                })
                .ServerFiltering(false); // 关闭服务器端过滤，启用本地过滤
            })
        .Filterable(filterable => filterable
            .Extra(false)
            .Operators(operators => operators
                .ForString(str => str.Clear()
                    .Add("匹配任意单词开头", "customWordStart") // 自定义过滤操作符
                )
            )
        )
)

2. 添加JavaScript代码注册自定义过滤逻辑：

// 注册自定义过滤函数，实现单词开头匹配
kendo.data.binders.filter["customWordStart"] = function(filter) {
    return function(item) {
        const searchTerm = filter.value.toLowerCase();
        // 将条目按空格分割为单词（处理多空格情况）
        const words = item.toLowerCase().split(/\s+/);
        // 检查是否存在以搜索词开头的单词
        return words.some(word => word.startsWith(searchTerm));
    };
};

方案二：后端远程过滤（适合数据量较大、需减少前端资源占用的场景） #

该方案将过滤逻辑放在服务器端，前端仅传递搜索关键词，后端返回匹配结果：

1. 修改MultiSelect的配置，开启服务器端过滤并传递搜索参数：

@(Html.Kendo().MultiSelectFor(model => model.data)
        .Name("SampleData")
        .AutoClose(false)
        .MaxSelectedItems(10)
        .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("GetData", "SampleData")
                        .Data("getSearchParams"); // 传递搜索参数到后端
                })
                .ServerFiltering(true); // 开启服务器端过滤
            })
        .Filterable(filterable => filterable
            .Extra(false)
            .Operators(operators => operators
                .ForString(str => str.Clear()
                    .Add("匹配任意单词开头", "customWordStart")
                )
            )
        )
)

2. 添加JavaScript代码获取并传递搜索参数：

function getSearchParams() {
    const multiSelect = $("#SampleData").data("kendoMultiSelect");
    const filter = multiSelect.dataSource.filter();
    let searchTerm = "";
    if (filter && filter.filters.length > 0) {
        searchTerm = filter.filters[0].value;
    }
    return { search: searchTerm };
}

3. 修改后端GetData方法，实现单词开头过滤逻辑：

public ActionResult GetData(string search)
{
    // 初始化你的数据源
    List<string> listitem = new List<string>(){"value item 1 here", "this item is 2", "some other value here"};
    
    // 若存在搜索关键词，执行过滤
    if (!string.IsNullOrEmpty(search))
    {
        var lowerSearch = search.ToLower();
        listitem = listitem.Where(item => 
            // 将条目分割为单词，检查是否存在以搜索词开头的单词
            item.ToLower().Split(new[] {' '}, StringSplitOptions.RemoveEmptyEntries)
                .Any(word => word.StartsWith(lowerSearch))
        ).ToList();
    }
    
    return Json(listitem, JsonRequestBehavior.AllowGet);
}

注意事项 #

• 前端方案需确保所有数据已加载到本地，若数据量过大可能影响前端性能；
• 后端方案需处理空搜索的情况，此时返回全部数据；
• 两种方案均对大小写不敏感，若需区分大小写，移除toLowerCase()相关逻辑即可。

内容的提问来源于stack exchange，提问作者NKATH