如何实现数组多属性搜索并按Code优先排序下拉匹配结果？

需求梳理 #

需要实现支持Name/City/Code字段的模糊搜索，同时满足：

• 匹配结果按优先级排序：Code字段匹配（优先前3字符）> Name/City字段匹配
• 输入字符时，匹配项自动排到下拉列表顶部
• 兼容超1000条数据的搜索场景

原代码问题修正 #

原代码存在两处明显错误：

1. user.code.includes(input) > -1：includes()返回布尔值，无需和-1比较，直接判断即可
2. arr.push(station)：循环变量是user，应该推入user而非未定义的station

完整实现代码 #

const input = e.currentTarget.value.trim().toUpperCase();
let filteredList = [...List];

if (input) {
  filteredList = filteredList
    .map(user => {
      let weight = 0;
      const [code, name, city] = [user.code, user.name, user.city].map(str => str.toUpperCase());

      // 权重规则：Code匹配优先级最高
      if (code === input) {
        weight = 3; // Code完全匹配，权重最高
      } else if (input.length >= 3 && code.startsWith(input.substring(0, 3))) {
        weight = 3; // 输入≥3字符时，匹配Code前3位，权重拉满
      } else if (code.includes(input)) {
        weight = 2; // Code包含输入，权重次之
      } else if (name.includes(input) || city.includes(input)) {
        weight = 1; // Name/City包含输入，权重最低
      }

      return { ...user, weight };
    })
    .filter(item => item.weight > 0) // 过滤无匹配的项
    .sort((a, b) => b.weight - a.weight); // 按权重降序，高权重项排顶部
}

// 用filteredList更新下拉列表即可

关键逻辑说明 #

• 不区分大小写搜索：将输入和所有字段统一转大写，避免大小写敏感导致的匹配遗漏
• 权重分级排序：通过给不同匹配场景设置权重，确保Code匹配的项始终排在最前面，尤其是输入≥3字符时优先匹配Code前3位，完全符合需求示例
• 性能兼容：1000条数据的map+filter+sort操作性能足够，若后续数据量更大，可考虑提前缓存字段的大写版本，减少重复转换开销

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