有没有更快的方法来搜索表中的值？答案

【问题标题】：Is there a faster way to search for a value in a table?有没有更快的方法来搜索表中的值？
【发布时间】：2019-10-09 04:35:37
【问题描述】：

我有一个包含近 1000 行的 html 表，需要具有搜索功能。我想让这个搜索自动进行，所以它会在用户开始输入字符串时开始搜索查询。这并不难，但是搜索的性质导致在我的搜索栏中输入第一个或两个字符后，页面会变慢几秒钟。

搜索代码如下：

const cols = search_drop.value;
const itemsArr = document.querySelectorAll('tbody tr');

for (const ele of itemsArr) {
    const lower_case_search_value = this.value.toLowerCase();
const lower_case_table_value = ele.querySelector(`td[headers="${cols}"]`).innerText.toLowerCase();

    if (!lower_case_table_value.includes(lower_case_search_value)) {
        ele.style.display = 'none';
    } else {
        ele.style.display = 'table-row';
    }
}

我已经尝试在后台搜索所有内容，而不是每次都重新渲染元素，但速度仍然很慢。有什么提示可以加快速度吗？

【问题讨论】：

那个选择器似乎效率很低。为什么你的所有单元格都有headers 属性？
只需深入了解table.rows[i].cells[j]。
您可以将td 值存储为数据属性，并通过智能选择器利用“CSS 搜索”。
我会使用 setTimeout 并在自己的线程中执行此操作。这样你就不会在函数运行时感觉到减速
谢谢。我会尝试所有这些。 @Bergi 标题代表用户将在其中搜索的列之一。

标签： javascript html performance search html-table

【解决方案1】：

我的猜测是，您可以将td 文本存储为数据属性并利用属性搜索（请参阅https://www.w3schools.com/cssref/sel_attr_contain.asp），或者您可以通过将表（矩阵）的索引与给定的相关来预先计算它们文本，那么您只需要迭代一个集合，这是一个线性时间（从某种意义上说，您不与 DOM 交互更好）。

【讨论】：