Question

尝试构建一个自定义过滤系统，其中的元素与用户键入的内容不匹配（将搜索每个元素的id以进行匹配）。它将包含以下内容：

TextBox - 这是用户开始输入以匹配数据集上的id的位置。只有匹配的结果才会显示，而不匹配的结果将被隐藏。如果该框为空或已清除，则将显示所有结果。

数据集 - 这将是div或表行形式的数据。每个父级td或div都有唯一的ID。

以下是数据集的示例版本：

<table>
<tr id=".com"><td>.com</td></tr>
<tr id=".com.au"><td>.com</td></tr>
<tr id=".ca"><td>.com</td></tr>
<tr id=".au"><td>.com</td></tr>
</table>

使用上面的例子，这是一个预期结果的例子：

用户类型＆＃39; om＆＃39; - 结果（显示应用的css，但jQuery.hide（）将正常工作。这只是显示差异）：

<table>
<tr id=".com"><td>.com</td></tr>
<tr id=".ca" style="visibility: collapse"><td>.ca</td></tr>
<tr id=".au" style="visibility: collapse"><td>.au</td></tr>
<tr id=".com.au"><td>.com.au</td></tr>
</table>

使用<input type="text" id="search">，使用jQuery实现此目标的有效方法是什么？

Answer 1

以下将基于任何用户输入方法

工作

plt.contourf

Answer 2

以下是我如何做到这一点：

var inputValue = $('#search').val();
jQuery('tr:not([id*="' + inputValue + '"])').hide();

这是attribute contains选择器和not选择器的组合。

Answer 3

我知道我在聚会上有点晚了，但使用indexOf()采用不同的方法：

$('#search').on('keyup', function(){
    var val = $(this).val();
  $('#mySearchTbl').find('tr').each(function(){
    var tr = $(this);
    if(val && tr.attr('id').indexOf(val) <= 0) {
        tr.css('visibility', 'collapse');
    }   else {
        tr.css('visibility', 'inherit');
    }
  })
});

And a fiddle，如果你想看到它的实际效果。只是另一种处理字符串搜索的方法，没有讨厌的RegEx。

修改
我看到Charlie打败了我，并且很好地使用了filter()方法，所以是的，我会选择那个更可重用的脚本，因为代码可以在没有jQuery的情况下运行，只是有不同的选择器。

filter() docs
indexOf() docs

选择其中id不与用户键入的字符串

3 个答案: