网页搜索输入框的这个搜索过滤器代码有啥问题？

Posted 2023-03-05

【中文标题】网页搜索输入框的这个搜索过滤器代码有啥问题？

【英文标题】：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;

【参考方案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;
  );