Click here to Skip to main content
15,035,600 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
   
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
   
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
   
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
Krunal Rohit 12-Nov-15 0:28am
   
Data is within the column, right ?

-KR
JOTHI KUMAR Member 10918227 12-Nov-15 1:08am
   
i need to search within the column but it will search including column and another issue i have 20 pages but it will search only current page how to resolve this two issues
Krunal Rohit 12-Nov-15 2:49am
   
See, paging hides and displays selected records only. Solution I've provided won't work for that.
I'd suggest you to use datatable.js for that. Google about it.
And I didn't get this: "i need to search within the column but it will search including column"

-KR
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.
   
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
   
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();

                   });
               });
           });
   

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