CSS过滤数据

2019-10-1485次阅读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实现数据过滤确实有点怪怪的,但这不妨也是实现数据过滤的一种方法。

上一篇: node.contains(otherNode)检查传入的节点是否为该节点的子孙节点.  下一篇: CSS自定义属性继承与默认值使用  

CSS过滤数据相关文章