javascript - 使用 jQuery 更快地搜索表

Question

我得到了这个代码

    $(document).ready(function() {
    var activeSystemClass = $('.list-group-item.active');

    //something is entered in search form
    $('#searchfor').keyup( function() {
       var that = this;
        // affect all table rows on in systems table
        var tableBody = $('.table-list-search').find('tbody');
        var tableRowsClass = $('.table-list-search tbody').find('tr');
        $('.search-sf').remove();
        tableRowsClass.each( function(i, val) {

            //Lower text for case insensitive
            var rowText = $(val).text().toLowerCase();
            var inputText = $(that).val().toLowerCase();
            if(inputText != '')
            {
                $('.search-query-sf').remove();
                tableBody.prepend('<tr class="search-query-sf"><td colspan="6"><strong>Searching for: "'
                    + $(that).val()
                    + '"</strong></td></tr>');
            }
            else
            {
                $('.search-query-sf').remove();
            }   

            if( rowText.indexOf( inputText ) == -1 )
            {
                //hide rows
                tableRowsClass.eq(i).hide();

            }
            else
            {
                $('.search-sf').remove();
                tableRowsClass.eq(i).show();
            }
        });
        //all tr elements are hidden
        if(tableRowsClass.children(':visible').length == 0)
        {
            tableBody.append('<tr class="search-sf"><td class="text-muted" colspan="6">No entries found.</td></tr>');
        }
    });
});

来自http://bootsnipp.com/snippets/featured/js-table-filter-simple-insensitive 。该代码的目的是扫描表格并过滤(“搜索”)输入的关键字。我已经遵循了有关如何加快代码速度的指南。但对于超过 400 条记录的表，代码仍然会卡住浏览器。有没有办法重写这段代码，使其运行得更快。我已经尝试删除each()，但由于我不太擅长JavaScript，所以我失败了。

Answer 1

性能问题无疑是由于每次按键时多次访问 DOM 造成的。如果您必须以这种方式访问​​表数据(例如，而不是 JSON)，那么最好的选择是首先将表行索引到可以更有效地搜索的数组中。

在此之前，如果可能的话，您通常希望在事件处理程序外部缓存您正在访问的 DOM 元素，否则 jQuery 必须在每次触发事件时查找这些元素。还可以利用现有的选择器(例如 tableBody)来获取子元素。

首先，我们有:

var tableBody = $('.table-list-search').find('tbody');
var tableRowsClass = tableBody.find('tr');

然后，我们为表建立索引，一次将行中的文本添加到 tableData 数组中。 在 keyup 事件之外和之前您有以下内容:

// store the table data in an array
var tableData = [];
tableRowsClass.each(function(i, val) {
    tableData.push($(val).text().toLowerCase());
});

最后，我们使用 each() 挖掘 keyup 事件中的表数据数组来查找搜索词的多个实例。

// scan the table data array on each keyup
$('#searchfor').keyup(function() {
    var inputText = $(this).val().toLowerCase();
    // use each instead of indexOf to get multiple instances
    $(tableData).each(function(i, val){
        if (val.indexOf(inputText) > -1) {
            // the index of the data in the array will be the same 
            // as the corresponding table row
            tableRowsClass.eq(i).show();
        } else {
            tableRowsClass.eq(i).hide();
        }
    });
});

这无疑会显着提高表搜索的效率。访问存储在 JavaScript 中的数据总是比从 DOM 中检索数据更快，这只是因为处理开销较少。

在此处查看使用上面代码的工作示例:http://jsfiddle.net/ah88w55k/