用 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</dt><dd>Ona</dd>
<dt>Last Name</dt><dd>Bednar</dd>
<dt>Email</dt><dd>schamberger.frank@wuckert.com</dd>
<dt>Phone</dt><dd>1-265-479-1196x714</dd>
</dl>
</li>
<li class="searchable" data-index="newtoncronintorphy.dorothea@gmail.com(121)644-5577">
<dl>
<dt>First Name</dt><dd>Newton</dd>
<dt>Last Name</dt><dd>Cronin</dd>
<dt>Email</dt><dd>torphy.dorothea@gmail.com</dd>
<dt>Phone</dt><dd>(121)644-5577</dd>
</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

参考资料：

Client-side full-text search in CSS

javascript input 事件