Kendo UI MultiSelect通过POST接口实现搜索功能异常求解

现有代码存在5个直接导致功能不可用的问题：

• 基础语法错误：请求体中第一个层级的txt属性键名缺失闭合引号，"txt: "Level4" 会直接触发JS解析错误，导致整个数据源初始化失败
• 参数读取逻辑错误：Kendo MultiSelect开启服务端过滤时，用户输入的搜索关键词存储在入参的filter.filters数组中，并非params.term（该字段是其他下拉组件的参数名），直接读取会永远拿到空值
• 配置项归属错误：placeholder是多选组件的配置项，写在DataSource配置中不会生效
• 无效冗余配置：read配置中重复声明了dataType/datatype，其中小写的datatype为无效属性
• 参数序列化位置错误：直接在data回调中返回JSON字符串，在部分Kendo版本中会触发参数二次序列化问题，导致后端无法正常解析请求体

修正后可直接运行的代码 #

// 抽离固定查询参数，避免每次请求重复声明
const baseQuery = {
    "txt": [
        {
            "txt": "Level4",
            "values": ["1819"]
        },
        {
            "txt": "Level3",
            "values": []
        },
        {
            "txt": "Level2",
            "values": []
        },
        {
            "txt": "Leve1",
            "values": ["278"]
        }
    ],
    "xyz": [
        {
            "dt": "2022-04-24",
            "field": "startDate"
        },
        {
            "dt": "2022-05-24",
            "field": "endDate"
        }
    ],
    "sorts": [],
    "limit": 50
};

const taskDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "https://searchapi/list",
            type: 'POST',
            contentType: 'application/json',
            dataType: 'json',
            beforeSend: function (xhr) {
                xhr.setRequestHeader('Authorization', 'Bearer @Session.AuthToken~');
            }
        },
        // 官方推荐的POST JSON参数处理位置
        parameterMap: function(options) {
            let searchKeyword = "";
            // 从组件传入的过滤条件中提取用户输入的搜索词
            if (options.filter?.filters?.length) {
                searchKeyword = options.filter.filters[0].value || "";
            }
            return JSON.stringify({
                ...baseQuery,
                q: searchKeyword
            });
        }
    },
    serverFiltering: true,
    serverSorting: true
});

$("#Tasks").kendoMultiSelect({
    placeholder: "Select Tasks...",
    filter: "contains",
    autoBind: false,
    dataValueField: "objectId",
    dataTextField: "title",
    dataSource: taskDataSource,
    delay: 300, // 输入停顿300ms再发请求，降低接口调用频率
    minLength: 1 // 输入至少1个字符才触发搜索，避免空请求
});

额外适配说明 #

• 若接口返回的选项数据不是直接的JSON数组，而是包裹在其他字段下（比如{code:200, data:[]}结构），需要给DataSource添加schema配置指定数据位置：

  schema: {
      data: function(response) {
          return response.data; // 根据实际接口返回结构调整
      }
  }
  

• 若需要调整搜索匹配规则，修改MultiSelect的filter属性即可，支持startswith（前缀匹配）、contains（包含匹配）、endswith（后缀匹配）三种模式

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