使用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