jQuery QuickSearch

HTML

<form action="#">
  <fieldset>
  <label for="listing">Quick Search: </label> <input type="text" id="id_search" value="" name="search">
  </fieldset>
  </form>

 
<table width="728" id="table_example">
  <thead>
  <tr>
 <th>Email</th>
  <th>Phone</th>
  <th>Total</th>
  <th>Ip</th>
  <th>Url</th>
  </tr>
  </thead>
  <tbody>
  <tr style="">
  <th>devo@flexomat.com</th>
  <td>941-964-8535</td>
  <td>$2482.79</td>
  <td>172.78.200.124</td>
  <td>http://gmail.com</td>
  </tr>
 <tr style="">
  <th>henry@mountdev.net</th>
  <td>941-964-9543</td>
  <td>$2776.09</td>
  <td>119.232.182.142</td>
  <td>http://www.gmail.com</td>
  </tr>
 <tr style="">
  <th>christian@reno.gov</th>
  
  <td>941-964-5617</td>
 <td>$2743.41</td>
  <td>167.209.64.181</td>
  <td>http://www.dotnet.ca</td>
  </tr>
 <tr style="">
  <th>muffins@donuts.com</th>
  
  <td>941-964-9511</td>
  <td>$2998.18</td>
  <td>210.214.231.182</td>
  <td>http://google.se</td>
 </tr>
 <tr style="">
  <th>muffins@reno.gov</th>
 
  <td>941-964-2757</td>
  <td>$1836.09</td>
  <td>220.222.93.171</td>
  <td>http://www.samba.org</td>
  </tr>
 <tr style="">
 <th>mendez@gmail.com</th> 
  <td>941-964-2575</td>
  <td>$2805.46</td>
  <td>228.170.245.253</td>
  <td>http://flexomat.com</td>
 </tr>
 <tr style="">
  <th>dev@gmail.com</th>
 
  <td>941-964-4967</td>
  <td>$3296.54</td>
  <td>175.248.70.240</td>
  <td>http://www.flexomat.com</td>
  </tr>
 <tr style="">
  <th>foo@polyester.se</th>
  <td>941-964-745</td>
  <td>$2953.73</td>
  <td>222.114.227.156</td>
  <td>http://www.donuts.com</td>
  </tr>
 <tr style="">
  <th>adam@aftonbladet.se</th>
  <td>941-964-6302</td>
  <td>$1949.27</td>
  <td>116.241.143.196</td>
  <td>http://flexomat.com</td>
  </tr>
 <tr style="">
  <th>devo@donuts.com</th>
  <td>941-964-1234</td>
  <td>$1067.00</td>
  <td>88.96.149.82</td>
  <td>http://www.polyester.se</td>
  </tr>

 <tr style="">
  <th>henry@samba.org</th>
  <td>941-964-4856</td>
  <td>$3401.19</td>
  <td>68.152.250.74</td>
  <td>http://www.flexomat.com</td>
  </tr>
 <tr style="">
 <th>found@dotnet.ca</th>
  <td>941-964-2686</td>
  <td>$1393.52</td>
  <td>98.102.181.138</td>
  <td>http://lostnfound.org</td>
  </tr>
 <tr style="">
  <th>carl@fish.org</th>
  <td>941-964-5792</td>
  <td>$3876.04</td>
  <td>246.234.182.243</td>
  <td>http://www.google.se</td>
  </tr>
 <tr style="">
  <th>found@mountdev.net</th>
  <td>941-964-1599</td>
  <td>$1176.48</td>
  <td>104.212.122.177</td>
  <td>http://donutsxxx.com</td>
  </tr>
  </tbody></table>

CSS

form { margin: 10px 0; }

table { width: 100%; border-collapse: collapse; }

thead th { background: #30a6d1; color: #fff; }

tbody th { text-align: left; }

table th, table td { border: 1px solid #ddd; padding: 2px 5px; font-size: 100%; }

.search { font-weight:  bold; }

form.quicksearch { padding: 10px; background: #000; }

form.quicksearch input { margin-left: 5px; width: 300px; }

form.quicksearch img { vertical-align: middle; margin-left: 5px; }

fieldset { background:#f2f2f2; padding:10px; border:#ccc 1px dashed;}

form input { font-size: 16px; font-family: 'Roboto Condensed', sans-serif; padding:4px; font-weight:bold; color:#ff5a00;}

JavaScript

$(function () {
				/*
				Example 1
				*/
				$('input#id_search').quicksearch('table#table_example tbody tr');
				
			});

jquery.js

Click to Download

jquery.quicksearch.js

Click to Download

Example

Click to DEMO