用 CSS 实现客户端全文搜索
作者 / 张 金龙
前些天看到一篇文章《Client-side full-text search in CSS》，个人感觉思路比较巧，跟大家分享一下。
总体思路：
使用 data- 属性用于索引，带 CSS3 选择器的动态样式表用于检索，主要用 CSS 简单实现了客户端的全文搜索。
下面上代码：
<!-- Data generated by Faker, see https://github.com/fzaninotto/Faker --> <ul class="contacts"> <!-- Add text to the data-index attribute to enable full-text search --> <!-- Don't forget to lowercase it to make search case-insensitive --> <li class="searchable" data-index="onabednarschamberger.frank@wuckert.com1-265-479-1196x714"> <dl> <dt>First Name<dd>Ona <dt>Last Name<dd>Bednar <dt>Email<dd>schamberger.frank@wuckert.com <dt>Phone<dd>1-265-479-1196x714 </dl> </li> <li class="searchable" data-index="newtoncronintorphy.dorothea@gmail.com(121)644-5577"> <dl> <dt>First Name<dd>Newton <dt>Last Name<dd>Cronin <dt>Email<dd>torphy.dorothea@gmail.com <dt>Phone<dd>(121)644-5577 </dl> </li> <!-- add as much data as you want --> </ul>
搜索非常简单：它利用了两个支持较好的 CSS3 选择器（:not() 和 [attr*=]），每当检索字符改变时重写样式表：
<input type="text" placeholder="search" id="search">
<style id="search_style"></style>
<script type="text/javascript">
var searchStyle = document.getElementById('search_style');
document.getElementById('search').addEventListener('input', function() {
if (!this.value) {
searchStyle.innerHTML = "";
return;
}
// look ma, no indexOf!
searchStyle.innerHTML = ".searchable:not([data-index*=\"" + this.value.toLowerCase() + "\"]) { display: none; }";
// beware of css injections!
});
</script>CSS 选择器对比 JavaScript indexOf() 优势在于速度：每次按键仅改变了一个元素（<style>标签），而不是改变匹配的所有元素。 :not() 选择器，IE 9 + 均支持，想兼容 IE 8+ 只需用两个规则替换此规则。
浏览器支持情况：
Mobile：欧朋 8+， UC， Chrome for Android
PC：Chrome 29，Opera 16，Firefox 23
参考资料：