/*动态生成的CSS将放在此处*/假设您有一个包含100个名字的列表：- RandyHilpert
- PeggieJacobi
- EthelynNolanSr.
...或文件名或电话号码等。你想在客户端过滤它们，这意味着你不请求在服务器端搜索数据并返回结果。您只想输入“rand”并让它过滤列表以包括“RandyHilpert”和“DanikaRandall”，因为它们都包含该字符串。其他一切都被排除在结果之外。让我们看看如何使用不同的技术来做到这一点。CSS几乎可以做到这一点。CSS不能根据项目包含的内容来选择项目，但它可以根据属性和这些属性的值来选择（使用CSS的属性选择器）。所以我们也将名称移到了属性中。RandyHilpertPeggieJacobiEthelynNolanSr....
现在过滤包含“rand”的名字列表，很简单：li{display:none;}li[data-name*="rand"i]{display:list-item;}注意第5行的字母“i”。这意味着“不区分大小写”，这在这里非常有用。为了使其动态化，我们将使用输入过滤器，我们需要让JavaScript不仅对输入的过滤器做出反应，而且生成与正在搜索的内容相匹配的CSS。假设我们在页面上有一个样式框：/*动态生成的CSS将放在此处*/我们可以监听过滤器输入的变化并生成该CSS：filterElement。addEventListener("input",e=>{letfilter=e.target.value;letcss=filter?`li{display:none;}li[data-name*="${filter}"i]{display:列表项；}`：``；window.cssFilter.innerHTML=css；}）；请注意，当过滤器为空时，我们会清空样式块，因此会显示所有结果。我承认用CSS做这件事很奇怪。jQuery使它更容易既然我们仍然需要JavaScript，也许jQuery是一个可以接受的工具。这里有两个显着的变化：jQuery可以根据项目包含的内容来选择项目。为此，它有一个选择器API。我们不再需要冗余属性。这使所有过滤都采用一种技术。我们仍然会监听要输入的内容的输入，然后，如果我们有过滤器，我们将隐藏所有列表项并显示包含过滤器的列表项。否则，我们再次显示所有内容：constlistItems=$("li");$("#filter").on("input",function(){letfilter=$(this).val();if(filter){listItems.hide();$(`li:contains('${filter}')`).show();}else{listItems.show();}});使过滤器大小不敏感编写起来比CSS更昂贵，但我们可以通过覆盖默认方法来实现：jQuery.expr[':'].contains=function(a,i,m){returnjQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;};这可以在React中使用state和Filter函数来完成。在React中没有真正的方法可以做到这一点，但我认为名称列表被保留为数据（如数组），映射它们并仅渲染需要的是React-y。输入的变化会过滤数据本身，如果需要，React会重新渲染。如果我们有一个names=[array,of,names]，我们可以很容易地过滤它：filteredNames=names.filter(name=>{returnname.includes(filter);});这次可以这样区分Case：filteredNames=names.filter(name=>{returnname.toUpperCase().includes(filter.toUpperCase());});然后我们将执行JSX中典型的.map()来迭代数组和输出名称。我没有任何特别的偏好，这不是你选择技术的原因。您可以使用现有技术来做到这一点。我也不认为任何一种方法在技术债务方面比另一种方法特别重。
