Create Live Search in HTML Table



Hello friends, today I will teach you how to show searching in a HTML table with jQuery. This is a very simple and easy code snippet which you can use it in small apps reporting where you want to add fast searching. This ‘Create Live Search in HTML Table’ jquery code is to make simple and fast searching possible, so download it or check out the demo.

 

PROJECT SCREENSHOT :

create-live-search-in-html-table

Code for this tutorial is very simple.

 

STEP 1:

First of all you need to create table.

<div class="form-group"><input id="search" class="form-control pull-right" style="width: 20%;" type="text" placeholder="Type to search table..." /></div>
<table id="mytable" class="table-bordered table pull-right" style="width: 100%;" cellspacing="0">
<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>
&nbsp;

STEP 2:

Next step is to include JQUERY.

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F3.1.0%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

 

STEP 3:

Last step is to add this Jquery snippet.

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%2F%2F%20Write%20on%20keyup%20event%20of%20keyword%20input%20element%0A%20%24(document).ready(function()%7B%0A%20%24(%22%23search%22).keyup(function()%7B%0A%20%20_this%20%3D%20this%3B%0A%20%2F%2F%20Show%20only%20matching%20TR%2C%20hide%20rest%20of%20them%0A%20%24.each(%24(%22%23mytable%20tbody%20tr%22)%2C%20function()%20%7B%0A%20if(%24(this).text().toLowerCase().indexOf(%24(_this).val().toLowerCase())%20%3D%3D%3D%20-1)%0A%20%20%24(this).hide()%3B%0A%20else%0A%20%20%24(this).show()%3B%0A%20%7D)%3B%0A%20%7D)%3B%0A%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

Finally our code is complete and now you can filter records by searching live.

Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends becaus“You share, I share, let’s make the world aware”.

You may want to take a look at the following related posts:

 

Also for more awesome tutorials, please don’t forget to like our facebook page TryCatch Classes.

 

Bonus: We also give training on following topics:

1. Web Designing Training in Mumbai.

2. Bootstrap Training Course in Mumbai.

3. Python Training in Mumbai.

4. UI / UX Training.

5. IOS Training Institute in Mumbai.