如何简化自动建议功能中matchedSuggestions的冗余过滤逻辑代码

你原有实现硬编码了前1、2、3位字符的判断，存在两个明显问题：

• 仅支持最长3位字符的输入匹配，用户输入第4位开始过滤逻辑就会失效
• 逐位切片、搜索的判断逻辑冗余，完全可以用JS原生字符串方法替代

简化思路 #

你需要的逐字符前缀匹配规则（输入内容从首字符开始和候选项逐位匹配），直接用String.prototype.startsWith()即可实现：该方法会从字符串起始位置逐位对比传入的子串，输入多长就匹配多少位，没有长度限制，完全符合你举的姓名匹配示例效果。

优化后代码 #

核心匹配逻辑 #

原来多段判断的matchedSuggestions可以简化为：

const matchedSuggestions = tagSuggestions.filter(
  s => s.startsWith(value) && !tags.includes(s)
)

如果需要忽略大小写匹配，可以改成s.toLowerCase().startsWith(value.toLowerCase())；如果需要支持匹配候选项任意位置的字符（非前缀匹配），把startsWith替换为includes即可。

完整优化后的onChange方法 #

顺手修复了你原有代码里的冗余调用和逻辑笔误：

• 删除了重复的setInput(value)调用
• 修正了输入为空时setIsValid传空数组的笔误，和后续空值校验逻辑保持一致

const onChange = (e) => {
  const { value } = e.target;
  setInput(value)

  if(value.length < 1) { 
    setSuggestedTags([]); 
    setIsValid(true);
    return; 
  }
  
  const matchedSuggestions = tagSuggestions.filter(s => s.startsWith(value) && !tags.includes(s))
  setSuggestedTags(matchedSuggestions); 

  setIsValid(value ? /^[1-5][0-9]?[0-9]?$|^100$/.test(value) : true);
};

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