js实现自动筛选与优化

      在使用js实现自动筛选过程中，由于数据较少，没有考虑数据展示速度问题。后期数据较多时出现页面延迟响应，这时发现展示方式可待优化，过程如下：

      优化前：

function filterList(list) {
    $('#js-maidianId').bind('input propertychange', function() {
        var filter = $(this).val();//获取文本框输入内容
        if (filter) {
            $matches = $(list).find('td:nth-child(2):Contains(' + filter + ')').parent();//td:nth-child(2)筛选列表第二列
            $('tbody tr', list).not($matches).slideUp();//不匹配向上滑动，不展示
            $matches.slideDown();//匹配向下滑动，展示列表
        } else {
            $(list).find("tbody tr").slideDown();//输入内容为空，展示所有列表项
        }
    });
}

       优化后：

function filterList(list) {
    $('#js-maidianId').bind('input propertychange', function() {
        var filter = $(this).val();//获取文本框输入内容
        if (filter) {
            $matches = $(list).find('td:nth-child(2):Contains(' + filter + ')').parent();//td:nth-child(2)筛选列表第二列
            $('tbody tr', list).not($matches).hide();//不匹配隐藏
            $matches.show();//匹配，展示列表
        } else {
            $(list).find("tbody tr").show();//输入为空，展示所有列表
        }
    });
}

 

分析原因：在于方法的使用：

        其中slideUp()、slideDown()向上、向下滑动，包含了动作，当列表数据过多时，筛选后滑动加载了数据和样式，需要耗费较多时间；而hide()、show()只是隐藏、展示，没有过多的滑动动作，渲染速度较快，当然也没有了滑动的样式效果。所以基于需求选择使用。