Thursday 20 February 2014

AutoCompleteExtender example in asp.net with C#

or
Auto search example in asp.net

--> when type in the textbox then display search item in panel with mouse over effect
--> if you want to create auto complete or auto search functionality in your asp.net application that time do following

--> first you take textbox from toolbox in your page
------------------------------------------------------------------------------------------------
    Search :  <asp:TextBox ID="txtName" runat="server"  Width="300px"></asp:TextBox>

-->add AutoCompleteExtender control (if Ajax control toolkit add otherwise download Ajax control toolkit)   
--> next add following code in your source (.aspx) file
------------------------------------------------------------------------------------------------       
                 <cc1:autocompleteextender ID="AutoCompleteExtender1" runat="server"
                 CompletionInterval="10" Enabled="True" FirstRowSelected="True"
                 MinimumPrefixLength="1" ServiceMethod="getData"
                  TargetControlID="txtName"
                 UseContextKey="True"  CompletionListCssClass="AutoExtender"  // 3 css class define below
                 CompletionListItemCssClass="AutoExtenderList"
                 CompletionListHighlightedItemCssClass="AutoExtenderHighlight"
                 CompletionListElementID="divwidth">
                 </cc1:autocompleteextender>
//ServicePath="~/WebService.asmx"   
//this use when your function (here getData -web service) is another file or in .asmx file


--> next add following code in your source (.aspx) file in head section
------------------------------------------------------------------------------------------------
    <style type="text/css">
        .AutoExtender
        {
            font-family: Verdana, Helvetica, sans-serif;
            font-size: .9em;
            font-weight: normal;
            text-align:left;
            border: solid 1px #E5E5E5;
            line-height: 20px;
            padding: 1px;
            background-color: White;
            margin-left:1px;
            margin-top:0px;
        }
        .AutoExtenderList
        {
            border-bottom: none 1px #FFFFFF;
            cursor: pointer;
            color: Black;
        }
        .AutoExtenderHighlight
        {
            color: black;
            background-color: gray;
            cursor: pointer;
        }

</style>


next add this code or web service in code behind file
------------------------------------------------------------------------------------------------
    [System.Web.Script.Services.ScriptMethod()]
    [System.Web.Services.WebMethod]
    public static List<string> getData(string prefixText)
    {
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ToString()); //ConnectionString
        con.Open();
        SqlCommand cmd;
        cmd = new SqlCommand("select top(10) Id,Name from tbl_Student where Name like '" + prefixText + "%'", con);    //Your database table name and field name
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataTable dt = new DataTable();
        da.Fill(dt);
        List<string> Clientname = new List<string>();
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            Clientname.Add("'" + dt.Rows[i]["Name"].ToString() + "'"); // this field fill when type in the textbox
        }
        con.Close();
        return Clientname;
    }

--> now run this page and type textbox then display list  item.

No comments:

Post a Comment



Asp.net tutorials