Sunday, 5 August 2018

Jquery search

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#myInput").on("keyup", function () {
                var value = $(this).val().toLowerCase();
                $("#myTable tr").filter(function () {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <tr>
                <td>
                    <input type="text" id="myInput" name="fname" /></td>
            </tr>

            <table id="myTable" width="100%">

                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email</th>
                </tr>
                <tr>
                    <td>Manoj</td>
                    <td>Sahoo</td>
                    <td>manoj@example.com</td>
                </tr>
                <tr>
                    <td>Rakesh</td>
                    <td>Dixit</td>
                    <td>rakesh@mail.com</td>
                </tr>
                <tr>
                    <td>Vipin</td>
                    <td>Dalei</td>
                    <td>vipin@greatstuff.com</td>
                </tr>
                <tr>
                    <td>April</td>
                    <td>Sahoo</td>
                    <td>april@abc.com</td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>