In this tutorial, We will learn how to create a live search on the HTML table with a jquery example, We will show an easy example of a live search on the HTML table using jquery.




Example:

<!doctype html>
<html>
    <head>
        <title>Live search on the HTML table with jQuery Example</title>

        <style>
            table th, table td
            {
                width: 100px;
                padding: 5px;
                border: 1px solid #ccc;
                background: #fff;
            }
            .notfound{
                display: none;
            }
            input{
                padding: 5px;
                margin-bottom: 5px;
                border-radius: 5px;
                border:2px solid #e0e0e0;
            }
        </style>
    </head>
    <body>
        <h2>Live search on the HTML table with jQuery Example</h2>
        <input type='text' id='txt_searchall' placeholder='Enter search text'>  
        <br/>
        <table width="60%">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Language</th>
                    <th>Framework</th>
                </tr>
            </thead>
            <tbody>

                <tr>
                    <td>1</td>
                    <td>PHP</td>
                    <td>Laravel</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>C</td>
                    <td>C++</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Android</td>
                    <td>Webkit</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>Java</td>
                    <td>Meteor</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>C#</td>
                    <td>MuPDF</td>
                </tr>
                <tr class='notfound'>
                    <td colspan='4'>No record found</td>
                </tr>
            </tbody>
        </table>

        <script src='https://code.jquery.com/jquery-3.6.0.min.js' type='text/javascript'></script>
        <script>


            $(document).ready(function () {

                // Search all columns
                $('#txt_searchall').keyup(function () {
                    var search = $(this).val();

                    $('table tbody tr').hide();

                    var len = $('table tbody tr:not(.notfound) td:contains("' + search + '")').length;

                    if (len > 0) {
                        $('table tbody tr:not(.notfound) td:contains("' + search + '")').each(function () {
                            $(this).closest('tr').show();
                        });
                    } else {
                        $('.notfound').show();
                    }

                });
            });
            // Case-insensitive searching (Note - remove the below script for Case sensitive search )
            $.expr[":"].contains = $.expr.createPseudo(function (arg) {
                return function (elem) {
                    return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
                };
            });

        </script>
    </body>
</html>



Thanks, May this example will help you.