使用CSS3數據屬性的客戶端文本搜索

Question

感謝這個想法 http://www.redotheweb.com/2013/05/15/client-side-full-text-search-in-css.html，我使用CSS3數據屬性和JQuery實現了客戶端文本搜索。

這是一個HTML例子

<input type="text" id="search"> 
<a id="btn">Filter</a> 

<ul> 
    <li data-index="A01658">A01658 and other stuff</li> 
    <li data-index="A09956">A09956 and other stuff</li> 
    <li data-index="B25628">B25628 and other stuff</li> 
    <li data-index="A01777">A01777 and other stuff</li> 
</ul> 

這是JS代碼（需要的jQuery）

$('#btn').click(function() { 
    $('ul > li:not([data-index=\"' + $('#search').val() + '\"])').hide(); 
});  

它的工作原理。但只有「完整」的文字。我需要讓用戶執行「部分」文本搜索（一個很好的例子是MySQL中的LIKE運算符）。 如果輸入「A01」，則第一個和第四個框應保持可見。 如果輸入「995」，則只有第二個框應保持可見。

有沒有機會做到這一點？ 謝謝

Answer 1

試試這個，這是http://api.jquery.com/attribute-contains-selector/

$('#btn').click(function() { 
    $('ul > li:not([data-index*=\"' + $('#search').val() + '\"])').hide(); 
}); 

Answer 2

這裏的另一個之一。這將在用戶鍵入搜索字段並相應地過濾LI時起作用。這也是不區分大小寫的。

var items = $('ul > li'); 
var search = $('#search'); 

search.on("keyup", function() { 
    items.show().filter(function() { 
     return $(this).data("index").toLowerCase().indexOf(search.val().toLowerCase()) < 0 
    }).hide(); 
}); 

演示@fiddle