In this post we will quickly see the search and highlight functionality using jQuery. For this we are taking a textbox and a table with two columns. Each column contains some dummy numbers. Goal is, while typing a number in the textbox, we will highlight the containing cell values of the table. Implementation is very simple. We are doing the following steps for this-
- Add a CSS class called highlight with some CSS in it for highlighting.
- Implement the keyup event for the textbox.
- In the keyup get the value of the text box.
- Remove any existing highlight class attached to table cell.
- Get matching cells of the table cell containing the value of the textbox.
- Add highlight class to the matching cells.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style>
.highlight{background-color:Yellow}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#BtnFindMobile").click(function () {
value = $("#txtSearchMobile").val();
$("#table td").removeClass("highlight");
$("#table td:contains(" + value + ")").addClass("highlight");
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="txtSearchMobile" runat="server"></asp:TextBox>
<table id="table">
<tr><td>578563495</td><td>5785642345</td></tr>
<tr><td>5436436</td><td>875768</td></tr>
<tr><td>578563495</td><td>789789</td></tr>
<tr><td>578563495</td><td>0789078907890</td></tr>
<tr><td>5235</td><td>5345345</td></tr>
<tr><td>57864634563495</td><td>687687687</td></tr>
<tr><td>77457567</td><td>68763876767</td></tr>
<tr><td>768768</td><td>5785687687645</td></tr>
<tr><td>8997896</td><td>68767367687</td></tr>
<tr><td>80</td><td>358787965423</td></tr>
<tr><td>64563456</td><td>7474574</td></tr>
<tr><td>7567456</td><td>5785642345</td></tr>
<tr><td>7845745746</td><td>9769</td></tr>
<tr><td>775567574579</td><td>976967979</td></tr>
</table>
</form>
</body>
</html>
No comments:
Post a Comment