Google+ All posts tagged 'search'

Peter Bromberg's .NET Blog All Things Programming

How to Filter (Search) in a Table With jQuery

25. October 2013 11:28 by admin in Jquery
0

Click here for Working Sample

<!DOCTYPE html> 
<html > 
<head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>JQuery Table Search Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery.expr[':'].contains = function(a,i,m){
return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
$(document).ready(function(){  
$('input[name="search"]').keyup(function(){ 
var searchterm = $(this).val();
			if(searchterm.length >2) {
var match = $('tr.data-row:contains("' + searchterm + '")');
var nomatch = $('tr.data-row:not(:contains("' + searchterm + '"))');
				match.addClass('selected');
nomatch.css("display", "none");
} else {
$('tr.data-row').css("display", "");
$('tr.data-row').removeClass('selected');
				}
			});
});	
</script>
<style type="text/css">table {background-color: #FAF3DF;}table tr.data-row {background-color: #fff;}table tr.data-row td.selected-cell {color: #fff;background-color: #660000;}table tr.data-header {background-color: #F1EDE3;border-bottom: solid 2px #fff;font-weight: bold;}table tr.selected {background-color: #FFCC88;}	</style></head>
<body><p>Search term:<input type="text" name="search" /></p><table cellspacing="4"><tr class="data-header"><td>Contacts</td></tr><tr class="data-row">
<td>Jerald Mickey</td></tr><tr class="data-row">
<td>Minda Carlen</td></tr><tr class="data-row">
<td>Marlene Nida</td></tr><tr class="data-row">
<td>Daysi Cassano</td></tr><tr class="data-row">
<td>Bonny Medford</td></tr><tr class="data-row">
<td>Patria Sciortino</td></tr><tr class="data-row">
<td>Kathaleen Herwig</td></tr><tr class="data-row">
<td>Junior Chamberlin</td></tr><tr class="data-row">
<td>Belkis Fleishman</td></tr><tr class="data-row">
<td>Evangeline Ishee</td></tr><tr class="data-row">
<td>Reyes Newland</td></tr><tr class="data-row">
<td>Eleonore Federico</td></tr><tr class="data-row">
<td>Briana Launius</td></tr><tr class="data-row">
<td>Eula Bernard</td></tr><tr class="data-row">
<td>Albert Palm</td></tr><tr class="data-row">
<td>Zofia Schlachter</td></tr><tr class="data-row">
<td>Donnette Nichols</td></tr><tr class="data-row">
<td>Herta Hile</td></tr><tr class="data-row">
<td>Lurlene Pfeffer</td></tr><tr class="data-row">
<td>Teresita Wasson</td></tr><tr class="data-row">
<td>Milagros Copes</td></tr><tr class="data-row">
<td>Ai Stimac</td></tr><tr class="data-row">
<td>Brigida Rake</td></tr><tr class="data-row">
<td>Alida Paxton</td></tr><tr class="data-row">
<td>Juliann Mattingly</td></tr><tr class="data-row">
<td>Phil Cervantes</td></tr><tr class="data-row">
<td>Lauryn Salgado</td></tr><tr class="data-row">
<td>Glady Lavergne</td></tr><tr class="data-row">
<td>Shawna Koerber</td></tr><tr class="data-row">
<td>Alana Halloway</td></tr></table>
</body>
</html>
Tags: , ,