Asp.Net jQuery GridView Filter Autocomplete

Question

0.00/5 (No votes)

See more:

, +

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 11-Nov-15 1:38am

JOTHI KUMAR Member 10918227

Add a Solution

3 solutions

Solution 2

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.

Posted 11-Nov-15 4:07am

Richard Deeming

Updated 18-Jan-16 1:11am

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.)

Solution 3

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

                   });
               });
           });

Posted 8-Dec-17 21:15pm

sribin

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Krunal Rohit · Accepted Answer · 2015-11-11T02:15:00

Solution 1

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

Posted 11-Nov-15 2:15am

Krunal Rohit

Updated 11-Nov-15 4:21am

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