• Home
  • PHP
  • MySQL
  • Demos
  • HTML
  • CSS
  • jQuery
  • Framework
  • Social
  • Request Tutorial
PHP Lift
  • Home
  • Demos
  • Advertisement
PHP Lift
  • Home
  • PHP
  • MySQL
  • Demos
  • HTML
  • CSS
  • jQuery
  • Framework
  • Social
  • Request Tutorial
  • Follow
    • Facebook
    • Twitter
    • Google+
    • Pinterest
    • Youtube
    • Instagram
    • RSS
Create Live Search in HTML table with jQuery
Home
HTML

Create Live Search in HTML table with jQuery

October 26th, 2020 Huzoor Bux HTML, jQuery 0 comments

Facebook Twitter Google+ LinkedIn Pinterest

This tutorial shows you client-side searching in an HTML table with jQuery this is a very simple and easy code snippet you can use it in small apps reporting where you want to add fast searching you can use this code snippet its a 10 line of code to make a simple and fast searching so download it or check it in demo.

DEMO
DOWNLOAD CODE

Code for this tutorial is very simple first of all you need to create a table.

<div class="form-group">
  <input type="text" class="form-control pull-right" style="width:20%" id="search" placeholder="Type to search table...">
</div>

<table class="table-bordered table pull-right" id="mytable" cellspacing="0" style="width: 100%;">
    <thead>
        <tr role="row">
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Satou Nao</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>33</td>
            <td>2008/11/28</td>
            <td>$162,700</td>
        </tr>
        <tr>
            <td>Ramos</td>
            <td>Chief Executive Officer (CEO)</td>
            <td>London</td>
            <td>47</td>
            <td>2009/10/09</td>
            <td>$1,200,000</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
        </tr>
        <tr>
            <td>Brad Gree</td>
            <td>Software Engineer</td>
            <td>London</td>
            <td>41</td>
            <td>2012/10/13</td>
            <td>$132,000</td>
        </tr>
        <tr>
            <td>Wagner Kumar</td>
            <td>Software Engineer</td>
            <td>San Francisco</td>
            <td>28</td>
            <td>2011/06/07</td>
            <td>$206,850</td>
        </tr>
        <tr>
            <td>Williamson j.</td>
            <td>Integration Specialist</td>
            <td>New York</td>
            <td>61</td>
            <td>2012/12/02</td>
            <td>$372,000</td>
        </tr>
        <tr>
            <td>Salman Khan</td>
            <td>Software Engineer</td>
            <td>London</td>
            <td>38</td>
            <td>2011/05/03</td>
            <td>$163,500</td>
        </tr>
        <tr>
            <td>Vinton Cerf</td>
            <td>Pre-Sales Support</td>
            <td>New York</td>
            <td>21</td>
            <td>2011/12/12</td>
            <td>$106,450</td>
        </tr>
        <tr>
            <td>Naveen Mishra</td>
            <td>Sales Assistant</td>
            <td>New York</td>
            <td>46</td>
            <td>2011/12/06</td>
            <td>$145,600</td>
        </tr>
        <tr>
            <td>Zohair Raza</td>
            <td>Engineer</td>
            <td>Dubai</td>
            <td>30</td>
            <td>2012/03/29</td>
            <td>$433,060</td>
        </tr>
    </tbody>
</table>

Now include jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

In the last put this jQuery code snippet:

<script>
 // Write on keyup event of keyword input element
 $(document).ready(function(){
 $("#search").keyup(function(){
  _this = this;
 // Show only matching TR, hide rest of them
 $.each($("#mytable tbody tr"), function() {
 if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)
  $(this).hide();
 else
  $(this).show();
 });
 });
});
</script>

Above code, snippet will work on search box kyup event and filter records available on your table.

Note: This feature can be used on client-side filtration.

snippet

Share this:

  • Click to share on Twitter (Opens in new window)
  • Click to share on Facebook (Opens in new window)

Related

  • Tags
  • HTML
  • jQuery
  • Live Search
Facebook Twitter Google+ LinkedIn Pinterest
Next article How to show Image before upload JavaScript & HTML5 FileReader()
Previous article Programming Languages for Better Job Opportunities

Huzoor Bux

I am a PHP Developer

Related Posts

How to Convert HTML to PDF in PHP with fpdf HTML
February 28th, 2022

How to Convert HTML to PDF in PHP with fpdf

Make Country, State and City Dropdown with REST API & jQuery API
February 27th, 2022

Make Country, State and City Dropdown with REST API & jQuery

DataTables Server-side Processing with PHP and MySQL Guide
February 24th, 2022

DataTables Server-side Processing with PHP and MySQL

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Advertisement
    Like us
    Recent Posts
    • How to Extract Text from PDF using PHP
    • 3 reasons why you SHOULD write tests
    • How to create a screen recorder in JavaScript
    • Best 10 Programming Languages that will rule in 2022
    • Top 7 Websites To Get Your First Paid Internship
    Categories
    • API
    • Bootstrap
    • Bot
    • CSS
    • CSS 3
    • Database
    • Designing
    • Framework
    • Guide
    • HTML
    • HTML 5
    • JavaScript
    • jQuery
    • MySQL
    • Node.js
    • oAuth
    • Payment
    • PHP
    • Python
    • Social
    • Tips
    • WordPress
    Weekly Tags
    • PHP
    • How to
    • javascript
    • api
    • MYSQL
    • jQuery
    • PHP Basics
    • Programming Habits
    • HTML5
    • PHP framework
    • About
    • Privacy Policy
    • Back to top
    © PHPLift 2021. All rights reserved.