Click here to Skip to main content
15,436,928 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
hi to all,
i want to search a data in gridview using autocomplete using jquery.here this my jquery

<script type="text/javascript">
$(document).ready(function() {
      $('#txtID').keyup(function(event) {
            var searchKey = $(this).val().toLowerCase();
            $("#grdEmployee tr td:nth-child(1)").each(function() {
                  var cellText = $(this).text().toLowerCase();
                  if (cellText.indexOf(searchKey) >= 0) {
                        $(this).parent().show();
                  }
                  else {
                        $(this).parent().hide();
                  }
            });
      });
});
</script>   



and my textbox :-

<asp:TextBox ID="txtcustid" runat="server" Width="100"></asp:TextBox>



XML
<asp:GridView
   ID="grdEmployee"
   runat="server"
   AutoGenerateColumns="true"></asp:GridView>


above code only search single column in girdview now i want how to filter all column in gridview.Kindly help me for this
Posted

JavaScript
$(document).ready(function() {
      $('#txtID').keyup(function(event) {
            var searchKey = $(this).val().toLowerCase();
            $("#grdEmployee tr td").each(function() {
                  var cellText = $(this).text().toLowerCase();
                  if (cellText.indexOf(searchKey) >= 0) {
                        $(this).parent().show();
                  }
                  else {
                        $(this).parent().hide();
                  }
            });
      });
}); 

Should work :)

Here $("#grdEmployee tr td:nth-child(1)") you'd be getting the first td of each row. That's why it is working for the first column. Remove :nth-child(1) and check whether it's working or not.

[Update - after the comment]
JavaScript
$("#txtID").keyup(function(){
    _this = this;
    $.each($("#grdEmployee tbody").find("tr"), function() {
        if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) == -1)
           $(this).hide();
        else
             $(this).show();
    });
});



-KR
 
Share this answer
 
v3
Comments
Richard Deeming 11-Nov-15 9:59am    
Close - that will only show the rows where the last cell in the row contains the text to be matched. :)
Krunal Rohit 11-Nov-15 10:21am     CRLF
Solution updated. -KR
JOTHI KUMAR Member 10918227 11-Nov-15 23:51pm    
thanks rohit its working.suppose if i have any query i will get back to you thanks to all.
Krunal Rohit 12-Nov-15 0:06am     CRLF
Glad I could help. -KR
JOTHI KUMAR Member 10918227 12-Nov-15 0:24am    
hey rohit above script its working but it search column also.but i need only data not column
Something like this should work:
JavaScript
$(document).ready(function() {
    $('#txtID').keyup(function(event) {
        var searchKey = $(this).val().toLowerCase();
        $("#grdEmployee tr").each(function() {
            var isMatch = $(this).children("td, th").is(function(){
                var cellText = $(this).text().toLowerCase();
                return cellText.indexOf(searchKey) >= 0;
            });

            if (isMatch) {
                $(this).show();
            }
            else {
                $(this).hide();
            }
        });
    });
});

That uses the jQuery is function[^] to check whether any of the child elements contain the specified text.
 
Share this answer
 
v2
Comments
JOTHI KUMAR Member 10918227 11-Nov-15 23:53pm    
sorry richard it will not working sorry
Richard Deeming 12-Nov-15 7:47am    
What does "not working" mean? Remember, I can't see your screen. :)
JOTHI KUMAR Member 10918227 18-Jan-16 0:24am    
i got error in var ismatch line in above script here i put alert it wont fire
Richard Deeming 18-Jan-16 7:12am     CRLF
Try changing the line to: var isMatch = $(this).children(... (Using $(this) instead of just this.)
A small modification to the above code to not to hide the header portion

$(document).ready(function () {
               $("#txtID").keyup(function () {
                   _this = this;
                   $.each($("#grdEmployee tbody").find("tr:has(td)"), function () {
                       if ($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) != -1)
                           $(this).show();
                       else
                       $(this).hide();

                   });
               });
           });
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900