AutoComplete Extender AJAX

Using AJAX AutoComplete Extender Sample

Basic Sample How To Get Texts From Sql Database To TextBox

SQL Query For Sample

CREATE TABLE tb_Client(
    [Client_id] [bigint] IDENTITY(1,1) NOT NULL,
    [Client_Name] [varchar](max) NULL,
   
)

.CS

[System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
    public static string[] GetClientList(string prefixText, int count, string contextKey)
    {
        if (count == 0)
        {
            count = 10;
        }

       
        List<string> items = new List<string>(count);

        SqlConnection con = new SqlConnection(ConfigurationManager.AppSettings["CString"]);
        SqlCommand cmd = new SqlCommand("SELECT [Client_Name],[Client_Id] FROM [dbo].[tb_Client] where Client_Name like '" + prefixText + "%'", con);
        if (con.State == ConnectionState.Closed)
            con.Open();
        cmd.CommandType = CommandType.Text;
        SqlDataReader dr = cmd.ExecuteReader();
        while (dr.HasRows)
        {
            while (dr.Read())
            {
                items.Add(dr.GetValue(0).ToString());

            }
            dr.NextResult();
        }

  

        return items.ToArray();
    }

You can also replace bit code with this to extend its performance as per your need.
           while (dr.Read())
            {
                string item = AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(dr["Client_Name"].ToString(), dr["Client_Id"].ToString());
                items.Add(item);

            }

.ASPX Page

<asp:TextBox ID="txtSearch" runat="server" Width = "200"></asp:TextBox>
           <asp:AutoCompleteExtender ID="AutoCompleteExtender2" runat="server"
               BehaviorID="AutoCompleteEx"
                TargetControlID="txtSearch"
                ServiceMethod="GetClientList"
                MinimumPrefixLength="1"
                CompletionInterval="100"
                EnableCaching="true"
                CompletionSetCount="20"
                CompletionListCssClass="AutoExtender"
        CompletionListItemCssClass="AutoExtenderList"
               
               
             
                CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
                DelimiterCharacters=";, :"
                ShowOnlyCurrentWordInCompletionListItem="true" UseContextKey="True" >
    </asp:AutoCompleteExtender>

CSS (add it in head)

  <style type="text/css">
   /*AutoComplete flyout */

.autocomplete_completionListElement
{ 
    margin : 0px!important;
    background-color : inherit;
    color : windowtext;
    border : buttonshadow;
    border-width : 1px;
    border-style : solid;
    cursor : 'default';
    overflow : auto;
    height :auto;
    text-align : left;
    list-style-type : none;
}

/* AutoComplete highlighted item */

.autocomplete_highlightedListItem
{
    background-color: #ffff99;
    color: black;
    padding: 1px;
}

/* AutoComplete item */

.autocomplete_listItem
{
    background-color : window;
    color : windowtext;
    padding : 1px;
}
  .AutoExtender
        {
            font-family: Verdana, Helvetica, sans-serif;
            font-size: .8em;
            font-weight: normal;
            border: solid 1px #006699;
            line-height: 20px;
            padding: 10px;
            background-color: White;
            margin-left:10px;
        }
        .AutoExtenderList
        {
            border-bottom: dotted 1px #006699;
            cursor: pointer;
            color: Maroon;
            font-style:normal;
        }


   </style>

In last here is what you are lookin for...

To Adjust the style of Autocomplete extender genrating list you can take a view at Autocomplete Simple CSS.


you may also like.
Ajax Calender Control
Ajax Progress Bar