用 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

参考资料:


标签:<a href="/?tag=javascript">javascript</a>,<a href="/?tag=css3">css3</a>