by zhangxinxu from http://www.

本文地址：http://www./wordpress/?p=3672

一、CSS選擇器可以用來(lái)實(shí)現(xiàn)搜索功能

CSS選擇器可以用來(lái)實(shí)現(xiàn)搜索功能。

以前提過(guò)CSS3的選擇器結(jié)合表單元素可以用來(lái)控制元素的顯隱，這里，類似的，還是CSS3的選擇器，用來(lái)過(guò)濾和搜索頁(yè)面元素。

二、demo走起

您可以狠狠地點(diǎn)擊這里：CSS attr屬性選擇器實(shí)現(xiàn)列表過(guò)濾效果demo

demo頁(yè)面輸入任意的英文字符或中文，就能過(guò)濾省會(huì)以及直轄市了，如下圖：

以往，我們要根據(jù)關(guān)鍵字確定哪些元素應(yīng)該顯示或隱藏需要借助JS的字符串匹配。但是，上面的匹配與顯隱完全是CSS控制的，很神奇吧，更高效更方便，到底是如何實(shí)現(xiàn)的呢？

三、CSS搜索過(guò)濾元素的原理

CSS3選擇器中，有一個(gè)叫做屬性選擇器的東西，有：[attr](有該屬性), [attr=xxx](屬性值是xxx), [attr^=xxx](屬性值是xxx開(kāi)頭), [attr$=xxx](屬性值xxx擦屁股), [attr*=xxx](屬性值包含xxx)這些用法。

demo中的過(guò)濾使用的是任意匹配，也就是[attr*=xxx]這種用法。于是，我們?cè)俳Y(jié)合not選擇器就可以把不匹配的元素給隱藏了，例如：

.list:not([data-index*="sh"]) { display: none; }

就是所有data-index值中不含有sh的列表隱藏。

我們來(lái)看下demo的HTML，部分列表省略，關(guān)鍵部分標(biāo)記大姨媽：

<input type="search" class="search" id="city" placeholder="輸入省會(huì)或直轄市名稱" />
<label class="datalist" for="city"> 
    <div class="list" data-index="重慶市chongqing">重慶市</div>
    <div class="list" data-index="哈爾濱市haerbing">哈爾濱市</div>
    <div class="list" data-index="長(zhǎng)春市changchun">長(zhǎng)春市</div>
    ...
</label>

可見(jiàn)，CSS實(shí)現(xiàn)搜索的關(guān)鍵就是data-index這個(gè)自定義屬性間的匹配。

SO，我們要實(shí)現(xiàn)搜索或者過(guò)濾，只要?jiǎng)討B(tài)改變[attr*=xxx]中xxx這個(gè)值就可以了，JS驗(yàn)證？No, No, No! 瀏覽器都幫你做了，兄弟。

于是，配合下面這點(diǎn)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就開(kāi)始支持了，不過(guò)如果要使用到not選擇器，似乎又要IE9+瀏覽器了。

因此，本技術(shù)目前IE9+支持，IE6-IE8需要您繼續(xù)加班寫(xiě)JS代碼實(shí)現(xiàn)。

其實(shí)，屬性選擇器不僅僅可以實(shí)現(xiàn)過(guò)濾，包括元素高亮，圖標(biāo)動(dòng)態(tài)標(biāo)注等都是可以實(shí)現(xiàn)的，配合其他一些CSS行為，可能會(huì)有更燦爛的菊花盛開(kāi)。

行文匆促，若有錯(cuò)誤，在所難免，歡迎指正，歡迎討論。

參考文章：Client-side full-text search in CSS

原創(chuàng)文章，轉(zhuǎn)載請(qǐng)注明來(lái)自張?chǎng)涡?鑫空間-鑫生活[http://www.]

本文地址：http://www./wordpress/?p=3672

（本篇完）

如果您覺(jué)得本文的內(nèi)容對(duì)您的學(xué)習(xí)有所幫助：

標(biāo)簽： :not, 屬性選擇器, 搜索, 選擇器

這篇文章發(fā)布于 2013年09月16日，星期一，22:14，歸類于 css相關(guān)。                        閱讀 4957 次, 今日 19 次