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

使用CSS3数据属性进行客户端文本搜索

2 个答案: