Live Table Search Function With JavaScript

(() => {
    // Cache DOM elements to avoid re-querying
    const input = document.getElementById("search-input");
    const table = document.getElementById("data-table");
    const rows = table.querySelectorAll("tr");
    const search_clear = document.getElementById("clear-icon");

    const searchTable = () => {
        // Convert input to lowercase
        const filter = input.value.toLowerCase().trim();
        // show hide input clear icon
        search_clear.style.display = filter.length > 0 ? "flex" : "none";
        rows.forEach((row, index) => {
            // Skip header row
            if (index === 0) return;
            // Flag to determine if the row should be displayed
            let row_found = false;
            // Get all cells in the current row
            const cells = row.querySelectorAll("td");
            // Loop through each cell in the current row
            for (let cell of cells) {
                // Check if the cell's text content matches the filter
                if (cell.textContent.toLowerCase().includes(filter)) {
                    row_found = true;
                    // Stop searching through cells once a match is found
                    break;
                }
            }
            row.style.display = row_found ? '' : 'none';
        });
    };

    // usage

    // for large table search you can use Debounce function
    // Debounce the search function to improve performance
    const debounce = (fn, delay) => {
        let timeoutId;
        return (...args) => {
            clearTimeout(timeoutId);
            timeoutId = setTimeout(() => fn(...args), delay);
        };
    };

    const debouncedSearch = debounce(searchTable, 200);

    // Add event listener to the input element
    input.addEventListener("input", debouncedSearch);

    // hide clear icon event
    search_clear.addEventListener("click", () => {
        input.value = "";
        search_clear.style.display = "none";
        searchTable();
    });
})();

<div class="search-wrap">
    <input type="text" id="search-input" placeholder="Search for names..">
    <span id="clear-icon" title="clear search">×</span>
</div>

<table class="my-table" id="data-table">
    <thead>
        <tr>
            <th>User Name</th>
            <th>Age</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Joan</td>
            <td>30</td>
            <td>USA</td>
        </tr>
        <tr>
            <td>Sonia</td>
            <td>25</td>
            <td>India</td>
        </tr>
        <tr>
            <td>Maria Garcia</td>
            <td>28</td>
            <td>Spain</td>
        </tr>
    </tbody>
</table>

/**  search box style **/
.search-wrap {
    margin: 10px 0;
    position: relative;
}

input#search-input {
    border: solid 1px #ccc;
    padding: 10px 6px;
    padding-right: 24px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 5px;
    max-width: 100%;
}

span#clear-icon {
    display: none;
    position: absolute;
    right: 1px;
    top: 1px;
    bottom: 1px;
    padding: 0px 5px;
    font-style: normal;
    font-size: 25px;
    user-select: none;
    cursor: pointer;
    color: #9e9e9e;
    z-index: 12;
    justify-content: center;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
}

/**  table style **/
.my-table {
    border-collapse: collapse;
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
}

.my-table tr {
    background-color: #ffffff;
    color: #000;
}

.my-table th {
    padding: 10px 10px;
    border: solid 1px #ccc;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
}

.my-table td {
    border: solid 1px #ccc;
    font-size: 13px;
    padding: 10px 10px;
    text-align: center;
}

.my-table thead > tr {
    background-color: #e9e9e9;
}

.my-table > tbody > tr:hover {
    background-color: #faffe3;
}