javascript - 加速 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");
    }
  });
}

使用老式 Android 手机处理超过 3000 个项目时，感觉有点慢。搜索功能有更好的解决方案吗？

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
});

查看工作 fiddle https://jsfiddle.net/q1x7ujex/