javascript - 有没有更快的方法来搜索表中的值？

Question

我有一个包含将近 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';
    }
}

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

Answer 1

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