CSS过滤数据

css不能根据包含的内容来选择内容，但是它可以根据属性和这些属性的值进行选择。所以让我们把名字也移动到属性中。

<ul>
  <li data-name="Randy Hilpert">Randy Hilpert</li>
  <li data-name="Peggie Jacobi">Peggie Jacobi</li>
  <li data-name="Ethelyn Nolan Sr.">Ethelyn Nolan Sr.</li> 
  ...
</ul>

现在要筛选包含“rand”的名称列表，非常简单：

li {
  display: none;
}
li[data-name*="rand" i] {
  display: list-item;
}

注意第4行的i。这意味着“不区分大小写”，这在这里非常有用。

要使此功能在过滤器<input>中动态工作，我们需要让javascript参与进来，不仅要对输入的过滤器做出反应，还要生成与搜索内容匹配的css。

假设页面上有一个<style>块：

<style id="cssFilter">
  /* 动态生成的css将放在这里*/
</style>

我们可以通过input事件监听input表单控件的输入及更改并生成CSS：

filterElement.addEventListener("input", e => {
  let filter = e.target.value;
  let css = filter ? `
    li {
      display: none;
    }
    li[data-name*="${filter}" i] {
      display: list-item;
    }
  ` : ``;
  window.cssFilter.innerHTML = css;
});

不得不承认利用CSS实现数据过滤确实有点怪怪的，但这不妨也是实现数据过滤的一种方法。