javascript - 加快 UL LI 列表中超过 5000 个对象的 AJAX 搜索速度

Question

堆栈社区，

我使用 .addClass 和 .removeClass 进行简单的 Ajax js 搜索，因为我发现它比 .show() 和 .hide() 更快。

问题是，它仍然不够快，我完全迷路了。

搜索可找到here

实际代码如下所示:Edit fiddle - JSFiddle - Code Playground

$(document).ready(function() {

  // Schovat pocet pri nacteni
  $("#vyhledavani_kompatibilit_pocet").hide();

  $("#vyhledavani_kompatibilit_input").keyup(function() {

    // Zobrazit pocet po napsani nejakeho vysledku
    $("#vyhledavani_kompatibilit_pocet").show();
    // Retrieve the input field text and reset the count to zero
    var filter = $(this).val(),
      count = 0;

    var searchKeyword = $(this).val();
    if (searchKeyword.length >= 3) {

      // Loop through the comment list 
      $(".komp").each(function() {

        // If the list item does not contain the text phrase fade it out
        if ($(this).text().search(new RegExp(filter, "i")) < 0) {
          $(this).addClass("schovatDiv");
          if ($(this).siblings(':hidden')) {
            $(this).parent().prev().addClass("schovatDiv");
          }


          // Show the list item if the phrase matches and increase the count by 1
        } else {
          $(this).parent().prev().removeClass("schovatDiv");
          $(this).removeClass("schovatDiv");
          count++;
        }
      });
    } else {
      $("#vyhledavani_kompatibilit_pocet").hide();
      $(".komp").parent().prev().removeClass("schovatDiv");
      $(".komp").removeClass("schovatDiv");

    };

    // Update the count
    var numberItems = count;

    {
      $("#vyhledavani_kompatibilit_pocet").text(count);
    }

  });
});

有什么方法可以加快搜索速度，这样当您在搜索字段中输入“东芝”时，过滤器就不会花费 8 秒的时间？

感谢您的任何提前或提示。 :)

Answer 1

您可以通过不渲染所有内容而仅渲染可见部分来提高性能。然后它就可以非常快地工作。