查找關鍵字從數據可見屬性使用屬性選擇

我嘗試通過使用jQuery和attR選擇喜歡做搜索過濾功能...查找關鍵字從數據可見屬性使用屬性選擇

$('p[data-keywords~="'+keywords+'"]') 
$('p[data-keywords*="'+keywords+'"]')

我全碼：

function search(keywords) { 
    $('p').removeClass('match'); 

    $('p[data-keywords~="'+keywords+'"]').addClass('match'); 
    $('p[data-keywords*="'+keywords+'"]').addClass('match'); 
} 


var search_timer; 
$("#search").keyup(function() { 
    var keywords = $(this).val(); 
    clearTimeout(search_timer); 
    search_timer=setTimeout(function(){ 
     search(keywords); 
    },1000); 
});

那看起來不錯

但是當數據是data-keywords="one two three" ..

，當我把one three搜索，它沒有發現

遊樂場：http://jsfiddle.net/l2aelba/dpjky/

任何想法？或者更好的想法只是告訴我，請

PS：有喜歡one xxx另一個隨機關鍵字關鍵字不會被發現

來源

2013-06-05 l2aelba

你的查詢搜索的精確匹配，即「一三」不「一二存在三」。

jQuery有，你雖然可以用一個漂亮的多屬性語法：
Multiple Attribute Selector [name="value"][name2="value2"]

所以先被分割的空間的字符串，然後創建一個這樣的選擇：

$('p[data-keywords~="one"][data-keywords~="three"]').addClass('match');

來源

2013-06-05 13:08:21 silkfire

哦謝謝，我們可以做到這樣的多個選擇器！：D – l2aelba

@ l2aelba你想要「一個xxx」導致匹配，是還是不是？ – silkfire

巾幗不讓鬚眉：d，怎麼xxx是一個字，不會被發現 – l2aelba

嘗試關聯您的關鍵字空間：

function search(keywords) { 
    $('p').removeClass('match'); 

    var keywords = keywords.split(' '); 
    for (var i = 0, l = keywords.length; i < l; i++) { 
     $('p[data-keywords*="'+keywords[i]+'"]').addClass('match'); 
    } 
}

DEMO

來源

2013-06-05 13:08:21

好主意，反正當我搜索'一個xxx'不會被發現，你能幫忙嗎？ – l2aelba

我覺得打字時onethree – Gautam3164

@它不會工作Gautam3164'onethree'只是一個關鍵字，所以它不應該在它'一個three'選擇行。 – 2013-06-05 13:13:47

查找關鍵字從數據可見屬性使用屬性選擇

回答

相關問題