jquery - 使用 jQuery 更快/更高效的实时搜索？

Question

我有一个 div 列表，其中的文本输入框中包含各种数据。

我有一个正在运行的“实时搜索”，当用户在输入框中输入信息时，div 会被过滤，直到只显示匹配的内容或根本不显示。

但是，当行数较多时，响应速度会变得缓慢，并且输入搜索词的速度也会变慢。

有没有更快或更有效的方法？

代码

$('input#create-row-name').keyup(function(e){
    if($(this).val()!==''){
        liveSearch();
    } else $('div#rows>div.column>div.row').show();
});

function liveSearch(){
    var searchTerm = $('input#create-row-name').val().toString().toLowerCase();
    $('div#rows>div.column>div.row').each(function(){
        var searchResult = $(this).find('div.input-group>input.row-name').val().toString().toLowerCase();
        if(searchResult.indexOf(searchTerm)>=0){
            $(this).show();
        } else $(this).hide();
    })
}

Answer 1

缓存值。删除关键部分中的 jQuery。

var $rows = $('div#rows>div.column>div.row');
var texts = $rows.map(function () {
    return $(this).find("div.input-group > input.row-name").text().toLowerCase();
}).toArray();

$('input#create-row-name').on("keyup paste drop", function () {
    var searchTerm = $.trim( this.value.toLowerCase() ), 
        lastTerm = $(this).data("lastTerm"),
        i, found;

    if (searchTerm === lastTerm) return;
    $(this).data("lastTerm", searchTerm);

    for (i = texts.length - 1; i >= 0; i--) {
        found = searchTerm === '' || texts[i].indexOf(searchTerm) > -1;
        $rows[i].style.display = found ? "" : "none";
    }
});

让搜索等到用户完成输入而不是在每次按键事件后立即运行是绝对明智的。我推荐一个debounce function like the one Sugar.js provides .

另外(作为一般提示，由于缓存的原因，此处不太相关):请记住，过于具体的选择器效率较低。 div#rows > div.column > div.row 的计算成本比 - 但可能相当于 - #rows .row。