Skip to content

All topics  /  jQuery

Live Search on The HTML Table With JQuery Example

jQuery ·

When “Live Search on The HTML Table With JQuery Example” moves through design, development and browser testing, create promote teamwork workplace can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the official jQuery website before adopting it in production.

Hi Guys,

In this blog, i will explain how to create live search on the html table with jquery example,We will show easy example of live search on the html table using jquery.which you are displaying in the HTML table. In this case, it’s better to allow the users to search text within the table.you can easily do this on your client-side with jquery.searching text within HTML table columns I am using .contains() method.

Here The Example Of search on The HTML Table With JQuery

Example


Now In this example,I will create two textboxes for searching value and a <table> with some records. and the <table> added a <tr class=’notfound’> at the last which display when no record found while search.

Html 

<!doctype html>
<html>
    <head>
        <title>Live search on the HTML table with jQuery Example - nicesnippets.com</title>
        <script src='jquery-3.1.1.min.js' type='text/javascript'></script>
        <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 style="margin-left: 15%; background: #eee">
      <h2>Live search on the HTML table with jQuery Example - nicesnippets.com</h2>
      <input type='text' id='txt_searchall' placeholder='Enter search text'>  
      <br/>
      <table width="40%">
          <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>
    </body>
</html>

JQuery here the live search on the html table for jquery code 

<!-- Script -->
<script type='text/javascript'>
    $(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>

It Will help you...

More on this topic