Tuesday, April 3, 2012

Search and highlight using jQuery

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-
  1. Add a CSS class called highlight with some CSS in it for highlighting.
  2. Implement the keyup event for the textbox.
  3. In the keyup get the value of the text box.
  4. Remove any existing highlight class attached to table cell.
  5. Get matching cells of the table cell containing the value of the textbox.
  6. Add highlight class to the matching cells.
Complete source code goes here-
<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