Question

我在构建一个通过数组的简单过滤器搜索时遇到了困难，当我按下退格键并且它没有响应时它停止工作

在我的HTML中我有

    <input type="text" placeholder="Search Name" (keyup)='filterNames($event)'>

在.js

filterNames(event) { 

    let input = event.target.value.toLowerCase();

    this.temp = this.nameslist.filter(function (n) {
        return n.firstName.toLowerCase().indexOf(input) > -1;

    });
    this.nameslist = this.temp;


}

nameslist是我的数组，带有一些值，temp我已声明为temp = [];

我没有看到问题出在哪里以及为什么我的列表对退格没有反应？

Answer 1

如下所示

＆＃13;

filterNames(event) { 

    let input = event.target.value.toLowerCase();

    this.nameslist = this.nameslist.filter(function (n) {
        return n.firstName.toLowerCase().indexOf(input) > -1;

    });


}

＆＃13;

Answer 2

在最后一行代码中指定this.nameslist = this.temp;时，this.nameslist仅包含已过滤的值。当您按退格键时，过滤后的值显然不会返回。您需要做的是使用不同的变量来保存筛选列表。 this.temp - 很好。（但最好将其重命名为this.filteredNamesList）。考虑这个例子：

＆＃13;

this.nameslist = [
  {firstName: 'Alex'},
  {firstName: 'Mike'},
  {firstName: 'Sridhar'}
];

this.temp = this.nameslist.slice(0, this.nameslist.lenght); //make a copy of names

function filterNames(elem) { 

    let input = elem.value.toLowerCase();
    this.temp = this.nameslist.filter(function (n) {
        return n.firstName.toLowerCase().indexOf(input) > -1;

    });
    console.log(this.temp);
}

＆＃13;

<input type="text" placeholder="Search Name" onKeyUp="filterNames(this)">

＆＃13;

因此，在此示例中，this.nameslist始终包含您的名称的完整列表，this.temp包含已过滤的列表，并成功处理退格操作。

Javascript过滤搜索无法在退格上运行

2 个答案: