A simple jquery filter ..!
Usage: Here my requirement is to search users by category (ex: music director and singer).
By using this code we can filter users
Demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<input type="text" name="search" placeholder="search" id="search" />
<p id="nodata"></p>
<ul style="float:left">
<li>
<div class="name">Devi sri prasad</div>
<div class="ltype">Music director</div>
</li>
<li>
<div class="name">Mani Sharma</div>
<div class="ltype">Music director</div>
</li>
<li>
<div class="name">anoop rubens</div>
<div class="ltype">Music director</div>
</li>
<li>
<div class="name">yesudasu</div>
<div class="ltype">singer</div>
</li>
<li>
<div class="name">S.P.Balu</div>
<div class="ltype">singer</div>
</li>
<li>
<div class="name">shankar mahadevan</div>
<div class="ltype">singer</div>
</li>
<li>
<div class="name">Shreya Ghoshal</div>
<div class="ltype">singer</div>
</li>
<br>
</ul>
<script>
$(document).on('keyup','#search',function(){
$("#nodata").text('');
$.extend($.expr[":"], {
"containsIN": function(elem, i, match, array) {
return (elem.textContent || elem.innerText || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
var searchval = $(this).val();
$("ul li .ltype:containsIN("+searchval+")").parent('li').show();
$("ul li .ltype:not(:containsIN("+searchval+"))").parent('li').hide();
var count = $("ul li:visible").length;
if(count==0)
{
$("#nodata").text("No Data Found");
}
});
</script>
</body>
</html>
test
ReplyDelete