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交互）。

有没有一种更快的方法来搜索表中的值？

1 个答案: