Question

我正在尝试在jquery中编写一个项目定位器。基本上，我有一个约350项的表。每个项目有3件事：项目名称，代码和单位大小。 表格中的每一行都有“item”类，并且在每一行中都有“dcode”，“item-name”或“unit-size”类来描述它显示的数据

我想在顶部放置一个输入搜索字段，以便对表中的行进行实时搜索。页面上可以有多个表，但一次只能看到一个表（有选项卡可以选择显示哪个表）。所以我想有一个输入字段，查找可见表，然后搜索它。

这是一个示例表：

<table>
  <tr class="item">
       <td class="item-name">Item name #1</td>
       <td class="code">001</td>
       <td class="unit-size">100ml</td>
  </tr
</table>

这是我的javascript

$(function(){

  var $itemsFoundCount = $("#itemsFound #count");

  if($(".nav-tabs").length !== 0) {

    $(".nav-tabs, .nav-tabs li a").click(function(){

      $("#itemFilter").val('').keyup();

      // Wait until view updates to count...      
      setTimeout(function() {
        $itemsFoundCount.html($(".item:visible").length); 

      }, 0);

    });
  }

  $("#itemFilter").keyup(function(){
    var filter = $(this).val().toLowerCase();

    var $allItems = $(".table:visible .item");

    if(filter === '') {
      $allItems.show();
      $itemsFoundCount.html($allItems.length);
      repaintRows();
      return;
    }

    $allItems.each(function(){
      var itemName = $(this).find('.item-name').html().toLowerCase(),
      code = $(this).find('.code').html().toLowerCase(),
      unitSize = $(this).find('.unit-size').html().toLowerCase(), itemType;

      if(itemName.indexOf(filter) == -1 && code.indexOf(filter) == -1 && unitSize.indexOf(filter) == -1) {
        $(this).hide();
      }
      else {
        $(this).show();
      }

    });

    $itemsFoundCount.html($(".item:visible").length);

  });

});

itemFilter是id =“itemFilter”

的输入

这适用于台式电脑，但在iPad和手机上它的速度非常慢。

我该怎么做才能让它跑得更快？

谢谢！

Answer 1

所有搜索都会查询dom。这需要时间并且表现不好。

在应用程序开始时将表数据复制到数组中并在那里执行搜索。

您可以从表中填充数组，如：

var data = new Array();

迭代所有表的行并填充像这样的数据

data.push([item-name, code, unit-size]);

或通过其他方式（json）加载数据并从数据中创建表。通过这种方式，您可以减少通过线路传输的数据，因为json文件不包含每行的所有冗余html标记。

稍后对数据进行搜索算法。条目的位置与表格行相同。例如jQuery选择器nth-child来查找对该行的访问。

更好的方法是保存对数据中行的引用以及：

data.push([THE_ROW, item-name, code, unit-size]);

这样你就可以直接解决它们而不必每次都在DOM中搜索它们。

请记住，THE_ROW必须是jQuery方法才能工作的jQuery元素。您可以从HTMLElement创建一个jQuery元素，如下所示：$(htmlElement)

麻烦搞清楚JavaScript性能问题

1 个答案: