CODEWITHSUNDEEP
javascriptoptimizationsearch
Douglas Vicentini
Douglas Vicentini

Reputation: 323

Is there any way to optimize my client side search function?

I've created a page that needs to show all records from a table, instead of paginating. The problem is that my search function actually takes about 10 seconds to run for 1300 records. Is there any way to optimize it?

I'm using bootstrap d-none class to hide elements.

if (document.getElementById("form_search_user")) {
    document.getElementById("form_search_user").addEventListener("submit",function (event) {
        event.preventDefault();
        let start = performance.now();

        let search = document.getElementById("search_input").value;
        let table_row = document.querySelectorAll(".user_table tbody tr");

        table_row.forEach(element => {
            element.innerText.toUpperCase().indexOf(search.toUpperCase()) > -1 ? 
            element.classList.remove("d-none") : element.classList.add("d-none");
        });
        console.log(((performance.now() - start) / 1000).toFixed(3));
    })
}

Upvotes: 0

Views: 261

Answers (1)

Bergi
Bergi

Reputation: 664538

Do not use .innerText which is known to be slow because it has to take styling into account. You probably want to search in .textContent instead.

Upvotes: 1

Related Questions