javascript - 使用 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();
 });