基于标签的 javascript/jquery 表过滤/搜索答案

【问题标题】：Table filtering/searching with javascript/jquery based on tags基于标签的 javascript/jquery 表过滤/搜索
【发布时间】：2013-05-04 11:26:41
【问题描述】：

我有一个表格，其中每一行都包含一个标签列表。我希望能够搜索这些标签并将表格缩小到仅包含该特定标签的行。例如，如果我在搜索框中输入2tag1 tagg，我只会得到包含这些标签的那两行。

我的桌子是这样的：

我的表格 HTML 如下所示：

<table class="table table-hover" id="tbl2">
            <thead>
                <tr>
                    <th class="span1">Merktu við spurningar</th>
                    <th class="span4"><strong>Spurning</strong></th>
                    <th class="span4"><strong>Vægi spurningar</strong></th>
                    <th class="span4">Tegund spurningar</th>
                    <th class="span2">Búin til</th>
                    <th class="span4">Tags</th>
                </tr>
            </thead>
            <tbody id="tbl2body">
                @for(question <- questions){
                    <tr id="row@question.spurningar_id">

                    <td><input type="checkbox" name="spurningar_id" id="@{question.spurningar_id}" onclick="enable(@question.spurningar_id)" value="@{question.spurningar_id}"></td>
                    <td>@{question.texti}</td>
                    <td><input type="number" min="0" max="100" value="0" size="6" name="vaegi" disabled="true" id="s@{question.spurningar_id}"></td>
                    <td><p>hehehe</p></td>
                    <td><strong>@{question.dagurbuidtil}</strong></td>
                    <td><ul id="tags"">
                        @for(tag <- question.tags){
                            <li class="well well-small">
                                @tag.leitarskilyrdi
                            </li>
                        }
                    </ul></td>
                    </tr>}
            </tbody>
        </table>

我尝试了以下 jquery，但这当然会搜索整行，而不仅仅是标签。如果我选择#tags li 而不是#tbl2body tr，我可以搜索标签，但行不会消失。

我该如何解决这个问题？

    $(document).ready(function() {
    $('li strong').click(function(e) {
        $(this).parent().find('em').slideToggle();
    });

    $('#search').on("input", function(e) {
        var words = $(this).val().toLowerCase().match(/\S+/g);
        if (!words) {
            $('#tbl2body tr').show();
        } else {
            $('#tbl2body tr').each(function() {
                var text = $(this).text().toLowerCase();
                var show = words.some(function(word) {
                    return ~text.indexOf(word);
                });
                $(this).toggle(show);
            });
        }
    });

}); // end document ready

【问题讨论】：

标签： jquery html search html-table

【解决方案1】：

你不能在一个页面中重复 ID，所以不要使用 <ul id="tags"> 使用 class 而不是 <ul class="tags">。

现在只搜索标签ul内的文本

$('#tbl2body tr').each(function() {
            var text = $(this).find('ul.tags').text().toLowerCase();
            var show = words.some(function(word) {
                return ~text.indexOf(word);
            });
            $(this).toggle(show);
        });

【讨论】：