Kendo UI：如何获取MultiSelect输入文本并传递给API

我来帮你搞定这个Kendo UI MultiSelect的远程搜索需求～既然API只返回包含搜索关键词的结果，那核心就是把用户输入的文本动态传给DataSource的read请求，具体实现可以按下面的步骤来：

1. 配置MultiSelect的过滤事件与DataSource #

首先，我们要利用MultiSelect的filtering事件捕获用户输入的关键词，同时让DataSource的read请求动态携带这个参数：

$("#multiselect").kendoMultiSelect({
    dataTextField: "text", // 对应API返回数据的文本字段
    dataValueField: "value", // 对应API返回数据的值字段
    dataSource: {
        transport: {
            read: {
                url: "你的API接口地址",
                dataType: "json",
                // 动态生成请求参数，把用户输入的搜索词传进去
                data: function() {
                    const multiSelect = $("#multiselect").data("kendoMultiSelect");
                    return {
                        searchTerm: multiSelect.filterInput.val()
                    };
                }
            }
        },
        schema: {
            data: "data" // 替换成你API返回结果中数据数组的键名
        }
    },
    filtering: function(e) {
        const filter = e.filter;
        // 如果用户没输入内容，阻止请求，避免加载全量数据
        if (!filter.value) {
            e.preventDefault();
            return;
        }
        // 触发DataSource重新读取数据，此时会带上最新的搜索词
        this.dataSource.read();
    }
});

2. API端配合接收参数 #

确保你的后端API能够接收searchTerm参数，并根据这个关键词过滤数据，返回匹配的结果集（比如包含该关键词的条目）。

3. 实用优化建议 #

• 添加防抖处理：避免用户每输入一个字符就发起一次请求，减轻API压力，这里用Lodash的防抖函数举例：

  // 先引入Lodash的debounce（或者自己实现防抖）
  const debounceRead = _.debounce(function(dataSource) {
      dataSource.read();
  }, 300); // 300ms延迟，可根据需求调整
  
  // 修改filtering事件
  filtering: function(e) {
      const filter = e.filter;
      if (!filter.value) {
          e.preventDefault();
          return;
      }
      debounceRead(this.dataSource);
  }
  

• 自定义过滤规则：如果默认的匹配逻辑不符合需求，可以在filtering事件里修改e.filter的配置，比如设置匹配规则为“开头匹配”：

  filtering: function(e) {
      e.filter.operator = "startswith"; // 可选：contains、equals等
      // 后续逻辑不变
  }
  

这样设置后，用户在MultiSelect输入框中输入文本时，就会自动把输入内容传给API，返回对应的过滤结果，完美解决大数据量下的加载问题～

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