在jquery中自定义搜索过滤器

当用户输入时，我使用jquery实现了一个搜索过滤器。我希望在用户输入时过滤标题和子元素。问题是当我搜索子元素时，即333（fiddler中显示的示例），222也会出现，这不应该发生；只有333个应该被过滤

$("#search").keyup(function () {
    var SEARCHWORD = this.value;

    $("#list li").each(function () {
        $(this).hide();

        $('h3:contains(' + SEARCHWORD + ')').closest('li').show();
        $('table:contains(' + SEARCHWORD + ')').closest('li').show();
        $('table:contains(' + SEARCHWORD + ')').show().siblings('table').hide();

        if (SEARCHWORD == "") {
            $('#list').find('table:hidden').show();
        }
    });
});

---

我附加了JSFIDLE链接“”

简单的解决方案是在每个表行（tr）之前添加表，而不是在一个表中添加两个tr

HTML:

---

搜索“333”时，会显示最近的

li

，其中也包含“222”。因此，您需要更改逻辑或HTML。单击小提琴中的“运行”，它将被执行。@putvande:感谢您的帮助。这是正确的；但是，当我试图在同一个标题中输入402711、402722等值，然后只输入“4027”时，这两个值都需要显示，但这并没有发生。请看一下小提琴，没错，那是因为你有一个。每个，首先它显示一个，然后在下一个循环中再次隐藏它。我来帮你修一下。有什么更新吗。我想这可能就是原因，如果你已经修好了，请告诉我。谢谢，我试了15分钟左右才修好，但最后还是吃了意大利面条。。。我几乎把它修好了，但效果不太好，所以我把它拆了……好吧，我也在试，但不能让它静止。

<ul id='list'>
    <li id='a1'>
         <h3>Header1</h3> 
        <table>
            <tr>
                <td>aaa</td>
            </tr>
        </table>
        <table>
            <tr>
                <td>xxx</td>
            </tr>
        </table>
        <table>
            <tr>
                <td>def</td>
            </tr>
        </table>
    </li>
    <li id='a2'>
         <h3>Header2</h3> 
        <table>
            <tr>
                <td>333</td>
            </tr>
        </table>
        <table>
            <tr>
                <td>222</td>
            </tr>
        </table>
        <table>
            <tr>
                <td>111</td>
            </tr>
        </table>
    </li>
</ul>

$("#search").keyup(function () {
    var SEARCHWORD = this.value;
     $("#list li").each(function () {
        $(this).hide();
        $('h3:contains(' + SEARCHWORD + ')').closest('li').show()
        $('table:contains(' + SEARCHWORD + ')').closest('li').show();
        $('table:contains(' + SEARCHWORD + ')').show().siblings('table').hide();
        if (SEARCHWORD == "") {
            $('#list').find('table:hidden').show();
        }
    });
});