一、CSS选择器可以用来实现搜索功能
CSS选择器可以用来实现搜索功能。
以前提过CSS3的选择器结合 表单元素可以用来控制元素的显隐 ,这里,类似的,还是CSS3的选择器,用来过滤和搜索页面元素。
二、demo走起
demo页面输入任意的英文字符或中文,就能过滤省会以及直辖市了,如下图:
以往,我们要根据关键字确定哪些元素应该显示或隐藏需要借助JS的字符串匹配。但是,上面的匹配与显隐完全是CSS控制的,很神奇吧,更高效更方便,到底是如何实现的呢?
三、CSS搜索过滤元素的原理
CSS3选择器中,有一个叫做属性选择器的东西,有: [attr] (有该属性), [attr=xxx] (属性值是 xxx ), [attr^=xxx] (属性值是 xxx 开头), [attr$=xxx] (属性值 xxx 擦屁股), [attr*=xxx] (属性值包含 xxx )这些用法。
demo中的过滤使用的是任意匹配,也就是 [attr*=xxx] 这种用法。于是,我们再结合 not 选择器就可以把不匹配的元素给隐藏了,例如:
.list:not([data-index*="sh"]) { display: none; }
就是所有 data-index 值中不含有 sh 的列表隐藏。
我们来看下demo的HTML,部分列表省略,关键部分标记大姨妈:
可见,CSS实现搜索的关键就是 data-index 这个自定义属性间的匹配。
SO,我们要实现搜索或者过滤,只要动态改变 [attr*=xxx] 中 xxx 这个值就可以了,JS验证?No, No, No! 浏览器都帮你做了,兄弟。
于是,配合下面这点JS,效果即完成:
var eleStyle = document.createElement("style");document.querySelector("head").appendChild(eleStyle);// 文本框输入document.querySelector("input").addEventListener("input", function() { var val = this.value.trim().toLowerCase(); if (val !== '') { // 改变CSS筛选规则 eleStyle.innerHTML = '.list:not([data-index*="'+ this.value +'"]) { display: none; }'; } else { eleStyle.innerHTML = ''; }});
四、兼容性
属性选择器IE8就开始支持了,不过如果要使用到 not 选择器,似乎又要IE9+浏览器了。
因此,本技术目前IE9+支持,IE6-IE8需要您继续加班写JS代码实现。
其实,属性选择器不仅仅可以实现过滤,包括元素高亮,图标动态标注等都是可以实现的,配合其他一些CSS行为,可能会有更灿烂的菊花盛开。
行文匆促,若有错误,在所难免,欢迎指正,欢迎讨论。
(本篇完)
欢迎加入我爱机器学习QQ14群:336582044
微信扫一扫,关注我爱机器学习公众号