How to use ajax control toolkit auto-complete in project?

In this blog article I will discuss how to use ajax-control tool kit auto-complete in ASP.NET application. It is very easy to integrate with your web form application. Let's discuss how to integrate it.

Step 1- Add reference of  ajax-control-tool-kit in project.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit.HTMLEditor"    TagPrefix="cc1" %>

Step 2- Add below classes in your CSS code.

        .AutoExtender
        {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 18px;
            font-weight: normal;
            border: solid 1px #006699;
            line-height: 20px;
            padding: 10px;
            background-color: White;
            margin-left: 10px;
        }
        .AutoExtenderList
        {
            cursor: pointer;
            color: Maroon;
        }
        .AutoExtenderHighlight
        {
            color: #5E6366;
            cursor: pointer;
        }

Step 3- Create Service that will return result to populate in auto-complete as in given example I get the list of Users in service method.

        [System.Web.Script.Services.ScriptMethod()]
        [System.Web.Services.WebMethod]
        public static string[] GetUserList(string prefixText)
        {
            List<string> lst = new List<string>();

            lst = GetUsers();
            string[] prefixTextArray = lst.ToArray<string>();
            return prefixTextArray;
        }

Step 4- Add below code for auto-complete in .aspx file.

           <div id="divwidth" style="width: 55%">
           </div>
           <asp:TextBox runat="server" Width="100%" ID="txtTo" Height="50px" TextMode="MultiLine"></asp:TextBox>
             <asp:AutoCompleteExtender ID="txtTo_AutoCompleteExtender" ServiceMethod="GetUserList"
                                            DelimiterCharacters=", " ShowOnlyCurrentWordInCompletionListItem="true" MinimumPrefixLength="1"
                                            CompletionInterval="0" EnableCaching="false" CompletionSetCount="10" TargetControlID="txtTo"
                                            runat="server" FirstRowSelected="false" CompletionListCssClass="AutoExtender"
                                            CompletionListItemCssClass="AutoExtenderList" CompletionListHighlightedItemCssClass="AutoExtenderHighlight"
                                            CompletionListElementID="divwidth">
            </asp:AutoCompleteExtender>

Hope you like this articles. Please give suggestion in below comments.