Kendo SearchBar搜索结果按StartsWith优先再匹配Contains排序问题

AI 小北

2026-10-2

Kendo SearchBar 自定义排序实现开头匹配优先方案

核心逻辑

Kendo SearchBar 默认仅按包含匹配的原始顺序返回结果，要实现开头匹配优先的效果，需要自定义筛选排序逻辑，给不同匹配类型的结果赋予不同权重后排序。

场景1：本地数据源实现

直接重写数据源的filter事件，自定义筛选排序逻辑即可，无需修改其他默认配置
代码示例：

$("#searchBar").kendoSearchBar({
  dataTextField: "name", // 如果是字符串数组可删除该行
  dataSource: {
    // 示例对象数组，字符串数组直接写data: ["Scientist", "Data Scientist", "Developer Scientist"]即可
    data: [
      {name: "Scientist"},
      {name: "Data Scientist"},
      {name: "Developer Scientist"}
    ],
    filter: function(e) {
      const searchKeyword = e.filter.filters[0].value.toLowerCase();
      // 先筛选所有包含关键词的条目
      const matchedItems = e.sender.data().filter(item => {
        // 字符串数组直接改成item.toLowerCase().includes(searchKeyword)
        return item.name.toLowerCase().includes(searchKeyword);
      });
      // 自定义排序：开头匹配优先，同匹配类型下短文本优先
      const sortedItems = matchedItems.sort((a, b) => {
        // 字符串数组直接取a和b判断
        const aIsStart = a.name.toLowerCase().startsWith(searchKeyword) ? 0 : 1;
        const bIsStart = b.name.toLowerCase().startsWith(searchKeyword) ? 0 : 1;
        if (aIsStart !== bIsStart) return aIsStart - bIsStart;
        return a.name.length - b.name.length;
      });
      // 覆盖默认筛选结果
      e.sender.data(sortedItems);
      e.preventDefault();
    }
  }
});