Monday, 19 August 2013

HOW TO USE ASP.NET AJAX AUTOCOMPLETE EXTENDER CONTROL


HOW TO USE ASP.NET AJAX AUTOCOMPLETE EXTENDER CONTROL 



1)  Create WebSite
2) Add aspx page
3) Add toolkitscript manager
4) Add  TextBox Control  which requires Auto Complete feature
5) Add Auto Complete Extender

asp:AutoCompleteExtender   PROPERTIES
1) TARGET CONTROL ID
2) ServiceMethod
3) MinimumPrefixLength(Default is 3) set it to 1


    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
        <b>Enter Product:</b><asp:TextBox ID="txtProduct" runat="server"></asp:TextBox>
        <asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
         TargetControlID="txtProduct" ServiceMethod="GetProductNames"
          MinimumPrefixLength="1"
         ></asp:AutoCompleteExtender>


6)  Add Web Service Method

    public static string[] szNames ={
                                       "Product1","Product2","Product3",
                                       "Product4","Product5","Product6"
                                       };

    [System.Web.Script.Services.ScriptMethod]
    [System.Web.Services.WebMethod]
    public static List<String> GetProductNames()
    {
        return szNames.ToList();
    }


   ScriptMethod attribute specifies it generates AJAX script
   WebMethod specifies it is Page Method.

7)  Run The Page

Here  is the Output