Thursday 13 June 2013

Auto Complete Function in asp.net



Here is the example

<
script type="text/javascript"src="JavaScript/jquery-1.7.2.js"></script>
<link type="text/css"
href="Stylesheet.css"
rel="Stylesheet" />
<script type="text/javascript">
$(document).ready(function() {
//
      // Client Side Search (Autocomplete)
      // Get the search Key from the TextBox
      // Iterate through the 1st Column.
      // td:nth-child(1) - Filters only the 1st Column
      // If there is a match show the row [$(this).parent() gives the Row]
      // Else hide the row [$(this).parent() gives the Row]
      $('#txtID').keyup(function(event) {
            var searchKey = $(this).val().toLowerCase();
            $("#grdEmployee tr td:nth-child(1)").each(function() {
                  var cellText = $(this).text().toLowerCase();
                  if (cellText.indexOf(searchKey) >= 0) {
                        $(this).parent().show();
                  }
                  else {
                        $(this).parent().hide();
                  }
            });
      });
});</script>   

<tr>
    <td>
        Search ID (Autocomplete):  
        <asp:TextBox ID="txtID" runat="server" Width="100"></asp:TextBox>  
    </td>
</tr>
 
<asp:GridView
   ID="grdEmployee"
   runat="server"
   AutoGenerateColumns="true"></asp:GridView>

Add your logic in codebehind to populate the Grid with data.

Stylesheet.css
.Grid
{
      border: 1px solid #000000;
}
.GridCell
{
    padding: 3px 3px 3px 3px; /* Cellpadding */
    border: 1px solid #000000;
    font-family:Verdana;
    font-size:10pt;   
}
.GridHeader
{
      background-color:#999966;
}.GridRow
{
    background-color:#ffffcc;
}

No comments:

Post a Comment