填坑之路：前端伪查询（续）

今天在完善毕设代码，猛地发现上一篇 填坑之路：前端伪查询 的代码有点过分了，直接empty了之前的ul，简直过分，这他么无法挽回了。
于是，又花了一点时间改进了一下事件核心代码。

// 查询
$(".rightBar").on("click",'.search_btn',function(){
    if($.trim($(".keyword").val()) !== ''){
        var ulList = $(".myPro-list").find("ul");
        var keyword = $(".keyword").val();
        var newList = '';
        for(var i = 0;i<ulList.length;i++){
            var content = $(ulList[i]).html();
            if(content.indexOf(keyword) == -1){
                $(ulList[i]).hide();
            }
        }
        
        if($(".myPro-list").find("ul:visible").length == 0){
            $(".table-part").find('.full-page').show();
        } else {
            $(".table-part").find('.full-page').hide();
        }
        
    } else {
        alert("抱歉，输入内容为空！！！");
    }
    
});

// 取消
$(".rightBar").on("click",'.cancel_btn',function(){
    $(".myPro-list").find("ul").show();
    $(".keyword").removeClass("active-keyword").val("");
    $(this).hide();
})

区别于上一篇，这里只是简单的把筛掉的ul给隐藏了，这样子就有了挽回的余地了。

结果：

检索.gif

说明：
1.查询按钮后面我加了个取消按钮，思路是把所有ul再显示（本人眼瞎，UI可以忽略！！！）；
2.本文仅仅适用于小数据量（一页就显示完全的）的应用，对于数据量比较大的数据列表（特别涉及到分页的）以上代码就无能为力了，还望赐教。