Question

我在用户输入时使用jquery实现了一个搜索过滤器。我希望在用户输入时过滤标题和子元素。问题是当我搜索子元素时。 333（小提琴手中显示的例子），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();
        }
    });
});

我附上了jsfiddle链接“My Test Fiddle”

Answer 1

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

<强> HTML：

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

jQuery（未更改）

$("#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();
        }
    });
});

JSFiddle demo

在jquery中自定义搜索过滤器

1 个答案: