DotNet and Infos: SEARCH TEXTBOX FOR GRIDVIEW USING JQUERY

Thursday, 20 December 2012

SEARCH TEXTBOX FOR GRIDVIEW USING JQUERY

IN THE ASPX PAGE
<html>
<head runat="server">
<%-- Jquery link --%>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<%-- Script --%>
<script type="text/javascript">
     $(document).ready(function () {
         $('#txtcatsearch').keyup(function (event) {
             var searchKey = $(this).val().toLowerCase();
<%--3 is the column name in the gridview used to search --%>
             $("#catgridview tr td:nth-child(3)").each(function () {
                 var cellText = $(this).text().toLowerCase();
                 if (cellText.indexOf(searchKey) >= 0) {
                     $(this).parent().show();
                 }
                 else {
                     $(this).parent().hide();
                 }
             });
         });
     });
</script>
</head>
<body>
<asp:TextBox ID="txtcatsearch" runat="server"></asp:TextBox>
<asp:GridView ID="catgridview" runat="server">
</asp:GridView><%-- Fill the gridview using either databind in the cs page or by anyother type --%>
</body>
</html>