Live Table Search Function With JavaScript

In this tutorial, we show you how to create a simple yet powerful table search function using JavaScript. This feature allows users to quickly filter through table data, improving the user experience on your website.

Follow our easy step-by-step guide to add a search box that allows users to filter table rows as they type. This way, only relevant rows are shown, making it much easier for users to find what they are looking for.

Dynamic Table Search Example

Type in the search box to real-time filter table data. You will see an icon to clear the input. Click the Clear button to remove the input value.

User Name Age Country
Joan 30 USA
Sonia 25 India
Maria Garcia 28 Spain
Bella 35 Japan

JavaScript Table Search Function

Here is an example of a JavaScript function that enables table search functionality

(() => {
    // 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 = 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
   = 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) => {
            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 = ""; = "none";

HTML Table code and search box

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

<table class="my-table" id="data-table">
            <th>User Name</th>
            <td>Maria Garcia</td>

Table and Input CSS code

/**  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;

Try it yourself edit and preview live

Try it your self

Download all code as HTML page

Download code

Features of this JavaScript table search function

  1. Case-Insensitive Search

    • Matches results regardless of letter case.
    • Enhances user experience by not requiring exact case matching.
    • Example: "apple" matches "Apple", "APPLE", "apple".
  2. Input Clear Value Option

    • Button or mechanism to clear the search field.
    • Simplifies resetting the search field.
    • Example: Clear (X) button in the search input box.
  3. Debounce Function for Large Table Search

    • Delays search execution to improve performance.
    • Reduces the frequency of search calls, ideal for large datasets.
    • Example: Search triggers 200ms after user stops typing.
  4. Lightweight JavaScript Function

    • Optimized and minimal in size.
    • Reduces load time and improves website performance.
    • Example: Pure JavaScript without large library dependencies.