加速jQuery/Javascript搜索功能

Question

我有超過3000個具有唯一名稱的項目列表。他們都包裹UL標籤內是這樣的：

<ul> 
    <li><a href="#"> Item_ID125167</a></li> 
    <li><a href="#"> Item_ID146324</a></li> 
</ul> 

然後，我有這樣一個搜索輸入：

<input type="text" id="searchfield" class="form-control" placeholder="Search"> 
<span class="input-group-addon"> 
    <button type="submit" id="searchButton" onclick="filterByName()"> 
     <span class="glyphicon glyphicon-search"></span> 
    </button> 
</span> 

最後隱藏/顯示匹配項的功能：

function filterByName() { 
    $("li").each(function(index) { 
    if ($(this).children('a').text().toUpperCase().indexOf($("#searchfield").val().toUpperCase()) > -1) { 
     $(this).css('display', ""); 
    } else { 
     $(this).css('display', "none"); 
    } 
    }); 
} 

這種感覺很慢，超過3000個物品，而使用古老的Android手機。是否有更好的搜索功能解決方案？

Answer 1

加速它意味着你應該重用資源儘可能

var $list = {}; // initialize an empty global scope variable to keep your elements in 
function filterByName(searchString) { 
    //reusing $list will prefent you from walking the dom each time 
    $list.each(function(index, el) { 
    el.style.display = el.title.indexOf(searchString) > -1 ? "list-item" : "none"; 
    }); 
} 

function loadList() { 
    $list = $('#results').find('li'); //faster than $('#results > li'); 
    $list.each(function(index, el) { 
     //save the uppercase search values in a propery to search faster 
     //this saves you from running .toUpperCase() on every search 
     var text = el.textContent || el.innerText; 
     el.setAttribute('title', text.trim().toUpperCase()); //using title makes a faster search later 
     $list[index]=el; 
    }); 
} 

$(function() { 
    loadList(); 
    $('#searchButton').click(function(e){ 
    e.preventDefault(); 
    //prepariung the search sring here saves processing during search 
    filterByName($("#searchfield").val().trim().toUpperCase()); 
    return false; 
    }); 
    //if your list is build dynamicly simple run loadList() every time changes to the list content may happen 
}); 

看到一個工作小提琴 https://jsfiddle.net/q1x7ujex/

Answer 2

我希望這段代碼能夠比你的更快一點。試試吧

function filterByName() { 
    var searchVal = $("#searchfield").val.toUpperCase(); 
    $("li").each(function() { 
     if (this.children[0].textContent.toUpperCase().match(searchVal)) { 
      this.style.display = ''; 
     } else { 
      this.style.display = 'none'; 
     } 
    }); 
} 

Answer 3

本頁面

因此：https://learn.jquery.com/performance/optimize-selectors/

您對使用find而不是children（它說，超高速）

你可以做其他的事情是創建一個數組該列表和使用jQuery.inArray

Answer 4

從我測試的find將在這種情況下比children更快的工作。
您可以通過自己運行它Test selectors，或查看結果：。

如果您的眼睛沒有任何改善，您可以使用我添加到您的功能中的console.time來查看結果，它會記錄操作到瀏覽器的時間。

function filterByName() { 
//Instead of selecting the search field + getting it's value + toUpperCase 
//*3000 times this way it will only happen once. 
var searchVal = $("#searchfield").val().toUpperCase(); 

//measures the time it takes for the operation 
console.time("test"); 
$("li").each(function() { 

    //find is faster than children 
    if ($(this).find("a").text().toUpperCase().indexOf(searchVal >-1)) { 
     this.style.display = ''; 
    } else { 
     this.style.display = 'none'; 
    } 
}); 
//Will write to the console the time it the operation took. 
console.timeEnd("test"); 
}