219. 【CSS-选择器世界】CSS-属性选择器搜索过滤技术

一、属性值正则匹配选择器

属性值正则匹配选择器包括下面 3 种：

[attr^="val"]
[attr$="val"]
[attr*="val"]

这三种属性选择器完全是字符匹配，而非单词匹配。其中 ^、美元符号 $以及星号 *都是正则表达式中的特殊标识符，分别表示前匹配、后匹配和任意匹配。

二、实例

我们可以借助属性选择器来辅助我们实现搜索过滤效果，如通讯录、城市列表，这样做性能高，代码少。

HTML结构如下：

<input type="search" id="input" placeholder="输入城市名称或拼音" />
<ul> 
    <li data-search="重庆市chongqing">重庆市</li>
    <li data-search="哈尔滨市haerbing">哈尔滨市</li>
    <li data-search="长春市changchun">长春市</li>
    <li data-search="兰州市lanzhou">兰州市</li>
    <li data-search="北京市beijing">北京市</li>
    <li data-search="杭州市hangzhou">杭州市</li>
    <li data-search="长沙市changsha">长沙市</li>
    <li data-search="沈阳市shenyang">沈阳市</li>
    <li data-search="成都市chengdu">成都市</li>
    <li data-search="合肥市hefei">合肥市</li>
    <li data-search="天津市tianjin">天津市</li>
    <li data-search="西安市xian">西安市</li>
    <li data-search="武汉市wuhan">武汉市</li>
    <li data-search="济南市jinan">济南市</li>
    <li data-search="广州市guangzhou">广州市</li>
    <li data-search="南京市nanjing">南京市</li>
    <li data-search="上海市shanghai">上海市</li>
    <li data-search="昆明市kunming">昆明市</li>
    <li data-search="郑州市zhangzhou">郑州市</li>
    <li data-search="贵阳市guiyang">贵阳市</li>
    <li data-search="西宁市xining">西宁市</li>
    <li data-search="海口市haikou">海口市</li>
    <li data-search="南昌市nanchang">南昌市</li>
    <li data-search="香港 特区xianggang">香港 特区</li>
    <li data-search="澳门 特区aomen">澳门 特区</li>
</ul>

JS 代码如下：

var eleStyle = document.createElement('style');
document.head.appendChild(eleStyle);
// input element
input.addEventListener("input", function() {
    var value = this.value.trim();
    eleStyle.innerHTML = value ? '[data-search]:not([data-search*="'+ value +'" i]) { display: none; }' : '';
});

PS: 正则匹配运算符是属性选择器新增的运算符，它可以忽略属性值大小写，使用字符 i 或者 I 作为运算符值，但约定俗称都使用小写字母 i 作为运算符。（上面的 JS 代码中就有用到）

最终效果如下：

---

CSS 的一些高级特性，学起来还是蛮有意思的，深入研究的话，会发现平时一些严重依赖 js 代码的模块，都是可以解耦合的，加油继续好好学。