《CSS 选择器世界》CSS属性选择器搜索过滤技术
我们可以借助属性选择器来辅助实现搜索过滤效果，如搜索通讯录、城市列表，这样做性能高，代码少。
HTML结构如下：
<input type="search" placeholder="输入城市名称或拼音" />
<ul>
<li data-search="重庆市chongqing">重庆市</li>
<li data-search="哈尔滨市haerbin">哈尔滨市</li>
<li data-search="长春市changchun">长春市</li>
...
</ul>
此时，当我们在输入框中输入内容的时候，只要根据输入内容动态创建如下CSS代码就可以实现搜索匹配效果了，无须自己写代码进行匹配验证。
var eleStyle = document.createElement('style');
document.head.appendChild(eleStyle);
// 文本框输入
input.addEventListener("input", function() {
var value = this.value.trim();
eleStyle.innerHTML = value ? '[data-search]:not([data-search*="'+ value +'"])
{ display: none; }' : '';
});
