Question

我有一些HTML元素在默认情况下是隐藏的，直到用户尝试搜索它为止。我想在完成DataTable搜索（如果找到）时将元素的类更改为show。

请参阅下面实现搜索的jQuery代码，下一步是显示它的父级或容器吗？

例如如果搜索键是c或cc或ccc，如何显示其父键（在本例中为<li class="show">）？

jQuery

$("#txtSearch").on('keyup keypress blur change', function(e) { 
    var val = $(this).val();
    $('#mytable').DataTable().search(val).draw();
});

HTML

<li class="hide">aaa</li>
<li class="hide">bbb</li>
<li class="hide">ccc</li>

Answer 1

看一下这段代码Snipp，遍历Hide类并提取内部文本，然后比较搜索结果。

    $("#txtSearch").on('keyup keypress blur change', function(e) { 

        var val = $(this).val();
        var numItems = $('.hide').length ;

            for(var count = 1; count<=numItems;count++){

                var index = count-1;
                var searchResult = $(".hide:eq("+index+")").text(); 

                if(val.indexOf(searchResult) > -1){

                    $(".hide:eq("+index+")").removeClass("hide").addClass("show");
                }

                else{

                    $(".hide:eq(" + index + ")").removeClass("show").addClass("hide");
                }
            }

        $('#mytable').DataTable().search(val).draw();

    });

数据表在搜索成功后显示隐藏的元素

1 个答案: