by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=3672
CSS選擇器可以用來實現(xiàn)搜索功能。
以前提過CSS3的選擇器結合表單元素可以用來控制元素的顯隱，這里，類似的，還是CSS3的選擇器，用來過濾和搜索頁面元素。
您可以狠狠地點擊這里：CSS attr屬性選擇器實現(xiàn)列表過濾效果demo
demo頁面輸入任意的英文字符或中文，就能過濾省會以及直轄市了，如下圖：
以往，我們要根據(jù)關鍵字確定哪些元素應該顯示或隱藏需要借助JS的字符串匹配。但是，上面的匹配與顯隱完全是CSS控制的，很神奇吧，更高效更方便，到底是如何實現(xiàn)的呢？
CSS3選擇器中，有一個叫做屬性選擇器的東西，有：[attr](有該屬性), [attr=xxx](屬性值是xxx), [attr^=xxx](屬性值是xxx開頭), [attr$=xxx](屬性值xxx擦屁股), [attr*=xxx](屬性值包含xxx)這些用法。
demo中的過濾使用的是任意匹配，也就是[attr*=xxx]這種用法。于是，我們再結合not選擇器就可以把不匹配的元素給隱藏了，例如：
.list:not([data-index*="sh"]) { display: none; }就是所有data-index值中不含有sh的列表隱藏。
我們來看下demo的HTML，部分列表省略，關鍵部分標記大姨媽：
<input type="search" class="search" id="city" placeholder="輸入省會或直轄市名稱" /><label class="datalist" for="city"> <div class="list" data-index="重慶市chongqing">重慶市</div> <div class="list" data-index="哈爾濱市haerbing">哈爾濱市</div> <div class="list" data-index="長春市changchun">長春市</div> ...</label>
可見，CSS實現(xiàn)搜索的關鍵就是data-index這個自定義屬性間的匹配。
SO，我們要實現(xiàn)搜索或者過濾，只要動態(tài)改變[attr*=xxx]中xxx這個值就可以了，JS驗證？No, No, No! 瀏覽器都幫你做了，兄弟。
于是，配合下面這點JS，效果即完成：
var eleStyle = document.createElement("style");document.querySelector("head").appendChild(eleStyle);// 文本框輸入document.querySelector("input").addEventListener("input", function() { var val = this.value.trim().toLowerCase(); if (val !== '') { // 改變CSS篩選規(guī)則 eleStyle.innerHTML = '.list:not([data-index*="'+ this.value +'"]) { display: none; }'; } else { eleStyle.innerHTML = ''; }});屬性選擇器IE8就開始支持了，不過如果要使用到not選擇器，似乎又要IE9+瀏覽器了。
因此，本技術目前IE9+支持，IE6-IE8需要您繼續(xù)加班寫JS代碼實現(xiàn)。
其實，屬性選擇器不僅僅可以實現(xiàn)過濾，包括元素高亮，圖標動態(tài)標注等都是可以實現(xiàn)的，配合其他一些CSS行為，可能會有更燦爛的菊花盛開。
行文匆促，若有錯誤，在所難免，歡迎指正，歡迎討論。
參考文章：Client-side full-text search in CSS
原創(chuàng)文章，轉載請注明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=3672
（本篇完）
如果您覺得本文的內容對您的學習有所幫助：
這篇文章發(fā)布于 2013年09月16日，星期一，22:14，歸類于 css相關。 閱讀 4957 次, 今日 19 次
