用 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
参考资料: