JavaScript数组筛选搜索功能退格键失效问题求助

我一眼就发现问题出在哪啦！你每次执行筛选后，直接把this.nameslist替换成了筛选后的结果——这就相当于把原始的完整数组给覆盖掉了。当你按下退格键想要缩小搜索范围时，已经没有完整的原始数据可以重新筛选了，功能自然就停止响应了。

修复方案：保留原始数组副本 #

核心思路是始终保留一份完整的原始数据，每次筛选都基于这份原始数据操作，而不是修改后的数组。

1. 初始化时保存原始数组
   在组件的初始化生命周期钩子（比如ngOnInit）里，把原始的nameslist拷贝一份存起来：

   ngOnInit() {
     // 用扩展运算符做浅拷贝，如果数组里是复杂对象可以考虑深拷贝
     this.originalNamesList = [...this.nameslist];
   }
   

2. 修改筛选函数
   把筛选逻辑改成基于原始数组originalNamesList，而不是被修改后的nameslist：

   filterNames(event) {
     const input = event.target.value.toLowerCase();
     // 每次都从原始数组中筛选结果
     this.nameslist = this.originalNamesList.filter(n => {
       return n.firstName.toLowerCase().includes(input);
     });
   }
   

额外优化小建议 #

• 用includes()替代indexOf() > -1，代码可读性更强；
• 如果你的数组元素是复杂对象，记得用深拷贝（比如JSON.parse(JSON.stringify(this.nameslist))）来避免引用问题，确保原始数组不会被意外修改。

这样修改后，不管是输入搜索关键词还是按下退格键，筛选功能都会基于完整的原始数据正常工作啦！

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