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.

13 Comments

Join the conversation! Your thoughts help the community grow.

Deepak Khare3y ago
Thanks for the information. But in my case, the data is around 15000+, and filtering the data is working fine. But a major issue is that loading the data in the grid view itself takes more time, and that's the main issue. So how can I resolve this issue? And I want the data filtering to be stronger as well.
Anand Joy5y ago
How to search the data based on columns only.
- Amit Kumar5y ago
  Hi, use instead of searchGridView use $('#searchGridView tbody td:nth-child(ColumnIndex):containsNoCase(\'' + $('#txtSearch').val() + '\')').parent().show(); it will work
Anand Joy5y ago
But in this code we are searching entire grid data.But I want searching only based on one column like Name.
Anand Joy5y ago
Hi Amit Kumar Sir.This code is very Great Helped to me.Thanks a lot Sir.
Karthi C6y ago
How can i sort my girdview in client side. I have checkbox in first column of my gridview, once i checked any checkbox, in that row will be sorted top of the girdview in client side. It is possible. please reply me ASAP
Karthi C7y ago
I have Checkbox in first column of my gridview. once i complete my search and check the checkbox after checked. checked rows are sorted above the gridview. Please Rpy ASAP
- Amit Kumar6y ago
  Yes, You can do that but change keyup event into click event of any button.
Karthi C7y ago
Hi, I Need comma sperater in search box for more search. Any option for that. Please rply ASAP.
Dan Barry7y ago
You are my new hero!!! Thank you!
- Amit Kumar6y ago
  Thank you so much..
Amit Kumar7y ago
Thank you somuch.
Buddika Uoc7y ago
Thanks for valuable article.