I found a Google function for client-side searching in a grid using a textbox
Here is the function:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function searchFunction(phrase, _id) {
var words = phrase.value.toLowerCase().split(" ");
var table = document.getElementById(_id);
var ele;
for (var r = 1; r < table.rows.length; r++) {
ele = table.rows[r].innerHTML.replace(/<[^>]+>/g, "");
var displayStyle = 'none';
for (var i = 0; i < words.length; i++) {
if (ele.toLowerCase().indexOf(words[i]) >= 0)
displayStyle = '';
else {
displayStyle = 'none';
break;
}
}
table.rows[r].style.display = displayStyle;
}
}
</script>
To call this function from a textbox, use the following code:
<asp:TextBox ID="txtSearch" TabIndex="2" onkeyup="searchFunction(this, '<%=GridView1.ClientID %>');" runat="server" AutoPostBack="True"/>
The Gridview used for searching looks like this:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" >
<Columns>
<asp:BoundField DataField="ClassName" HeaderText="Class Name" />
<asp:BoundField DataField="PerWeekClass" HeaderText="Week Classes" />
<asp:BoundField DataField="SubID" visible="false" />
</Columns>
</asp:GridView>
The issue I encountered with this function is that it searches strings from all columns of the grid instead of just the first column.
I am not very familiar with JavaScript, so I would appreciate any help or suggestions to resolve this problem.
Thank you in advance!