Есть ли более быстрый способ поиска значения в таблице?

Question

У меня есть HTML-таблица с почти 1000 строк, которая должна иметь функцию поиска.Я хочу сделать этот поиск автоматическим, поэтому он начинает поиск запроса, когда пользователь начинает вводить строку.Это не так сложно, но характер поиска заставляет страницу замедляться в течение нескольких секунд после ввода первого или двух символов в мою строку поиска.

Вот код для поиска:

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).