Angular项目中大小写混合搜索功能失效如何解决

问题根因 #

你当前的过滤逻辑仅对产品名称、产品内容做了大小写转换，没有对用户输入的searchText（搜索关键词）做统一的大小写格式化。当用户输入混合大小写的关键词时，自然无法匹配被转成全小写/全大写的产品字段内容。

修复方案 #

把搜索关键词也统一转为和待匹配字段相同的大小写格式即可，修改后代码如下：

return products.filter((items) => {
  // 统一将搜索关键词转为全小写
  const formattedSearch = searchText.toLowerCase();
  return (
    items.product_name.toLowerCase().includes(formattedSearch) ||
    items.product_content.toLowerCase().includes(formattedSearch)
  );
});

效果说明 #

修改后无论用户输入的是全大写、全小写还是混合大小写的关键词，都会先统一转为全小写，和同样转成全小写的产品字段做匹配，即可实现不区分大小写的搜索功能，同时精简了原来重复的判断逻辑，运行效率更高。

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