search gridview records on textbox keypress using jquery in asp.net

Question

0.00/5 (No votes)

See more:

My jquery is

$(document).ready(function () {
              var rows;
           var coldata;
           $('#txtSearch').keyup(function () {
               $('#<%=gvCompanyListing.ClientID%>').find('tr:gt(0)').hide();
               var data = $('#txtSearch').val();
               var len = data.length;
               if (len > 0) {
                   $('#<%=gvCompanyListing.ClientID%>').find('tbody tr').each(function () {
                       coldata = $(this).children().eq(1);
                       var temp = coldata.text().toUpperCase().indexOf(data.toUpperCase());
                       if (temp===0) {
                           $(this).show();
                       }
                   });
               } else {
                   $('#<%=gvCompanyListing.ClientID%>').find('tr:gt(0)').show();
               }

           });

And my html page is

ASP.NET

form id="form" runat="server" class="gridViewContainer">
        <input type="text" placeholder="Find" id="txtSearch" />
        <div style="height: 150px; width: 175px; overflow: auto;">
            <asp:GridView ID="gvCompanyListing" runat="server" AutoGenerateColumns="False" ShowHeader="False" GridLines="None">
                <Columns>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:CheckBox ID="cbSelect" CssClass="gridCB" runat="server" ItemStyle-Width="10%" ></asp:CheckBox>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:BoundField DataField="CompanyInfo" SortExpression="CompanyInfo" ItemStyle-Width="92%"></asp:BoundField>
                </Columns>
            </asp:GridView>
        </div>
    </form>

And codebehind.cs page contains

if (!this.IsPostBack)
           {
               DataTable dt = new DataTable();
               dt.Columns.AddRange(new DataColumn[1] { new DataColumn("CompanyInfo") });

               dt.Rows.Add("BETA NAME");
               dt.Rows.Add("XEROX NAME");
               dt.Rows.Add("GAMMA NAME");
               dt.Rows.Add("ALFA NAME");
               dt.Rows.Add("EMILI NAME");
               dt.Rows.Add("MANUAL NAME");
               dt.Rows.Add("CATHERIN NAME");
               dt.Rows.Add("MARIA NAME");
               dt.Rows.Add("MILAN NAME");
               dt.Rows.Add("RAPHEL NAME");
               dt.Rows.Add("JACOB NAME");
               gvCompanyListing.DataSource = dt;
               gvCompanyListing.DataBind();
           }

my issue is on keypress event it filters the data,but it displays first data and searched data.
(eg:on clicking 'c' on text it displays 'BETA NAME; and 'CATHERIN NAME').
how i will solve the issue.

Posted 17-Nov-15 23:44pm

Member 12133978

Updated 18-Jul-16 2:14am

v4

Add a Solution

Comments

[no name] 18-Nov-15 6:58am

When you say "displays first data and searched dat.", what does it mean. Elaborate it. Secondly you are searching "c" then it it is displaying "BETA NAME" and "CATHERINE NAME".

2 solutions

Solution 2

You can use this code to search in gridview without hide header.

JavaScript

$(document).ready(function () {
          var rows;
       var coldata;
       $('#txtSearch').keyup(function () {
           $('#<%=AspGrid.ClientID%>').find("tr:gt(0)").hide();
           var data = $('#txtSearch').val();
           var len = data.length;
           if (len > 0) {
               var gridHeader = $('#<%=AspGrid.ClientID%>').find('tbody th');
               $('#<%=AspGrid.ClientID%>').find('th').each(function (index) {
                   $('#<%=AspGrid.ClientID%>').find('tbody tr').each(function () {
                   coldata = $(this).find('td').children().eq(index);
                   var temp = coldata.text().toUpperCase().indexOf(data.toUpperCase());
                   if (temp === 0) {
                       $(this).show();
                   }
               });
               });

           } else {
           $('#<%=AspGrid.ClientID%> tbody tr').show();
           }

       });
       });

Posted 18-Jul-16 2:14am

kalsa

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)

Anil Sharma1983 · Accepted Answer · 2015-11-18T01:14:00

you can do this way .Hide all tr code change

XML

<script>
 $(document).ready(function () {
           var rows;
        var coldata;
        $('#txtSearch').keyup(function () {
            $('#<%=gvCompanyListing.ClientID%> tbody tr').hide();
            var data = $('#txtSearch').val();
            var len = data.length;
            if (len > 0) {
                $('#<%=gvCompanyListing.ClientID%>').find('tbody tr').each(function () {
                    coldata = $(this).children().eq(1);
                    console.log(coldata);
                    var temp = coldata.text().toUpperCase().indexOf(data.toUpperCase());
                    console.log(temp);
                    if (temp===0) {
                       alert("show");
                       console.log( $(this));
                        $(this).show();
                    }
                });
            } else {
            $('#<%=gvCompanyListing.ClientID%> tbody tr').hide();
                alert("hel;lo");
            }

        });
        });
 </script>