网页搜索输入框的这个搜索过滤器代码有什么问题？答案

【问题标题】：What is wrong with this search filter code for a webpage search input box?网页搜索输入框的这个搜索过滤器代码有什么问题？
【发布时间】：2021-03-25 16:59:53
【问题描述】：

这会在我的 html 搜索栏输入中的 onkeyup 事件中调用。我用调试器浏览了它，它实际上得到了用户键入的 searchInput，但是关于 filter() 函数的一些东西不起作用。它实际上并没有过滤 storageSvc 数组，然后使用过滤后的数据重新渲染表。 “名称”是我的数据数组中对象的一部分。

没有错误，只是没有真正过滤数据。

function searchTeam(){
    let searchInput = document.getElementById("searchInput").value;
    storageSvc.filter({name:searchInput});
    // re render table 
    renderTable("#tableContainer", storageSvc.list());
}
filter(filterObj) {
    //returns a copy of the filtered array
    ///e.g., storageSvc.filter({coachLicenseLevel:1});
    return this.model.data.filter((d) => {
        for (const key of Object.keys(filterObj)) {
            if (d[key] !== filterObj[key]) {
                return false;
            }
        }
        return true;
    });
}

【问题讨论】：

storageSvc的值是多少？
检查 camaulay 的答案，因为它解释了您的代码问题。此外，如果您不打算立即返回过滤后的结果，则将过滤后的数据缓存在 storageSvc 属性中，并在调用 list 方法时返回结果数组。
storageSvc = new storageService(teamData, "teamData");
list() { //按原样返回数据项列表 return this.model.data; }

标签： javascript html css local-storage storage

【解决方案1】：

您实际上并没有使用过滤器函数的返回值。

尝试将过滤器函数的返回值分配给一个变量，然后将该变量传递给您的渲染函数：

function searchTeam() {
  let searchInput = document.getElementById("searchInput").value;
  const filteredResults = storageSvc.filter({ name: searchInput });
  // renderTable("#tableContainer", storageSvc.list() );
  renderTable("#tableContainer", filteredResults);
}

function filter(filterObj) {
  //returns a copy of the filtered array
  ///e.g., storageSvc.filter({coachLicenseLevel:1});
  return this.model.data.filter((d) => {
    for (const key of Object.keys(filterObj)) {
      if (d[key] !== filterObj[key]) {
        return false;
      }
    }
    return true;
  });
}

【讨论】：