AspBucket offers ASP.NET, C#, VB, Jquery, CSS, Ajax, SQL tutorials. It is the best place for programmers to learn

Wednesday, 10 February 2016

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.
            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;
            cursor: pointer;
            color: Maroon;
            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.
        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%">
           <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"

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


Post a Comment

  • Popular Posts
  • Comments