Search Data Very Quickly Using jQuery In Web Application

In this article, we will learn how to search data from a table without hitting front-end and back-end (this means without a heat database or server-side code). For searching the records from an entire page, there are two ways to do it. For searching the specific records, we will send the request using the AJAX method and search the records from the database, then the result will be shown. And another method is that we will store all the records in any collection like dataset or session or any other variable and use LINQ for filtering it.

Now, all these ways will take a long time. Your application will run very slowly if you post a huge amount of data on the server-side. For solving this issue, we will search the data from jQuery in HTML table.

Here is how to search the records using jQuery.

Let’s start it with an example.

Open Visual Studio-> Create a new project which is "SearchRecords".

 After clicking on Project

 

 

After clicking on OK button, the below dialog box will open. Here, select emptyan template and then click on OK button. 

 

 Now, our project is created successfully. Then, we need to add a new web page which you can see in the below screen-shot.

 

After clicking on OK button, our project is created. Now, I will add gridview control for binding the records.

<form id="form1" runat="server">
  <div>
           <asp:GridView ID="searchGridView" runat="server" Style="width: 80%;margin-left: 100px" ForeColor="Black" BackColor="#CCCCFF"
            BorderColor="#00FFCC" BorderStyle="Solid" Font-Names="Arial">
         <AlternatingRowStyle BackColor="#FFCC99" BorderColor="#00FFCC" />
    </asp:GridView>
   </div>
</form>

And create an input control for entering search value.

<p style="text-align: right; width: 500px; margin-top: 50px; margin-left: 150px">
       <span style="font-weight: bold;">Search:</span>
       <input type="text" id="txtSearch" name="txtSearch" maxlength="50" style="height: 25px; font: 100" />
   </p>

Now I will fetch the records with this method.

public DataTable getStudentDetails()
{
  SqlCommand cmd = new SqlCommand();
  SqlConnection con = new SqlConnection(mainConnectionString);
  cmd.CommandType = CommandType.StoredProcedure;
  cmd.CommandText = "spstudentList";
  cmd = new SqlCommand(cmd.CommandText,con);
  SqlDataAdapter adapter = new SqlDataAdapter(cmd.CommandText, con);

  DataTable employees = new DataTable();
  adapter.Fill(employees);
  return employees;
}

After getting the total records I will bind it in our gridview which is "searchGridview".

searchGridView.DataSource = getStudentDetails();
searchGridView.DataBind();

After successfully binding the record in gridview it looks like this.

 

Now when we enter any values for searching in the above input box we will search the record without page posting and without hitting on server-side we will use jquery on keyup event for searching very fast.

$('#txtSearch').keyup(function () {
         if ($('#txtSearch').val().length > 1) {
             $('#searchGridView tr').hide();
             $('#searchGridView tr:first').show();
             $('#searchGridView tr td:containsNoCase(\'' + $('#txtSearch').val() + '\')').parent().show();
         }
         else if ($('#txtSearch').val().length == 0) {
             resetSearchValue();
         }
});

 Cancel the Search value if user presses Backspace or ESC key.

$('#txtSearch').keyup(function (event) {
            if (event.keyCode == 27) {
                resetSearchValue();
            }
 });

function resetSearchValue() {
        $('#txtSearch').val('');
        $('#searchGridView tr').show();
        $('.norecords').remove();
        $('#txtSearch').focus();
    }

Below code will shown jquery to have a : Contains selector which is case insensitive, the :contains selector remains unchanged.

$.expr[":"].containsNoCase = function (el, i, m) {
       var search = m[3];
       if (!search) return false;
       return eval("/" + search + "/i").test($(el).text());
   };

Now here is the full code for the client side.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="SearchRecords.Home" %>

<!DOCTYPE html>
<script src="jquery-3.3.1.min.js"></script>
<script language="javascript" type="text/javascript">
    $.expr[":"].containsNoCase = function (el, i, m) {
        var search = m[3];
        if (!search) return false;
        return eval("/" + search + "/i").test($(el).text());
    };

    $(document).ready(function () {
        $('#txtSearch').keyup(function () {
            if ($('#txtSearch').val().length > 1) {
                $('#searchGridView tr').hide();
                $('#searchGridView tr:first').show();
                $('#searchGridView tr td:containsNoCase(\'' + $('#txtSearch').val() + '\')').parent().show();
            }
            else if ($('#txtSearch').val().length == 0) {
                resetSearchValue();
            }

            if ($('#searchGridView tr:visible').length == 1) {
                $('.norecords').remove();
                $('#searchGridView').append('<tr class="norecords"><td colspan="6" class="Normal" style="text-align: center">No records were found</td></tr>');
            }
        });

        $('#txtSearch').keyup(function (event) {
            if (event.keyCode == 27) {
                resetSearchValue();
            }
        });
    });

    function resetSearchValue() {
        $('#txtSearch').val('');
        $('#searchGridView tr').show();
        $('.norecords').remove();
        $('#txtSearch').focus();
    }

</script>
<html>
<body>
    <p style="text-align: right; width: 500px; margin-top: 50px; margin-left: 150px">
        <span style="font-weight: bold;">Search:</span>
        <input type="text" id="txtSearch" name="txtSearch"  placeholder="    type search text" maxlength="50" style="height: 25px; font: 100" />
    </p>
    <form id="form1" runat="server">
        <div>
            <asp:GridView ID="searchGridView" runat="server" Style="width: 80%; margin-left: 100px" ForeColor="Black" BackColor="#CCCCFF" BorderColor="#00FFCC" BorderStyle="Solid" Font-Names="Arial">
                <AlternatingRowStyle BackColor="#FFCC99" BorderColor="#00FFCC" />
            </asp:GridView>
        </div>
    </form>
</body>
</html>

Server side code

namespace SearchRecords
{
    public partial class Home : System.Web.UI.Page
    {
        public static readonly string mainConnectionString = ConfigurationManager.ConnectionStrings["con"].ToString();

        protected void Page_Load(object sender, EventArgs e)
        {
            searchGridView.DataSource = getStudentDetails();
            searchGridView.DataBind();
        }

        public DataTable getStudentDetails()
        {
            SqlCommand cmd = new SqlCommand();
            SqlConnection con = new SqlConnection(mainConnectionString);
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.CommandText = "spstudentList";
            cmd = new SqlCommand(cmd.CommandText,con);
            SqlDataAdapter adapter = new SqlDataAdapter(cmd.CommandText, con);

            DataTable employees = new DataTable();
            adapter.Fill(employees);
            return employees;
        }
    }
}

Output

 

 

Conclusion

In this article, we saw that we can search records from any control without page post. It helps us in searching records very quickly. I hope it will be helpful for all web applications nad developers everywhere.