ASP.NET

How to use AutoCompleteExtender ajax controls using asp.net?

I have menu code and i want to get menu list on text change according to code. and separate them between two toolboxes.

Step 1

Drag & Drop one texbox from toolbox on design page...

<asp:TextBox ID="txtItemCode" runat="server" OnTextChanged="txtItemCode_Changed" AutoPostBack="true" Width="155px" ForeColor="#663300" Font-Bold="true" BackColor="#FFFFCC" />

Step 2

Drag & Drop one AutoCompleteExtender from toolbox on design page...

<asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" CompletionListCssClass="completeListStyle" TargetControlID="txtItemCode" MinimumPrefixLength="1"  EnableCaching="true" CompletionSetCount="1" CompletionInterval="300" ServiceMethod="GetCode" >
</asp:AutoCompleteExtender>

Step 3

Go to the view Code and Write query according to your Data Base.

[System.Web.Script.Services.ScriptMethod()]
    [System.Web.Services.WebMethod]
    public static List<string> GetCode(string prefixText)
    {   
        SqlConnection con = new SqlConnection(ConfigurationManager.AppSettings["Conn"]);
        con.Open();
        SqlCommand cmd = new SqlCommand("select ItemCode,Item from Menu where ItemCode like @ItemCode+'%'", con);
        cmd.Parameters.AddWithValue("@ItemCode", prefixText);
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataTable dt = new DataTable();
        da.Fill(dt);
        List<string> CountryNames = new List<string>();
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            CountryNames.Add(dt.Rows[i][0].ToString() + " " + dt.Rows[i][1].ToString());
        }      
        return CountryNames;
    }

Step 4

Make this funcation and call it on OnTextChanged...

 public void Item()
    {
        try
        {
            string[] item = txtItemCode.Text.Split(' ');
            if (item.Length>=2)
            {
                cmd = new SqlCommand("select Item from Menu where ItemCode='" + item[0] + "'", con);
                string Item = Convert.ToString(cmd.ExecuteScalar());
                if (Item == "")
                {
                    ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "success", "alert('Info : Item not found !')", true); txtItemCode.Text = "";
                    txtItemCode.Focus();
                }
                else
                {
                    txtItem.Text = Item;
                    txtItemCode.Text = item[0]; txtQty.Focus();
                }
            }
            else
            {
                ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "success", "alert('Info : Item Code not found !')", true);
                txtItemCode.Text = ""; txtItemCode.Focus();
            }
        }
        catch (SqlException)
        {
            ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "success", "alert('Info : Item Code not Found !')", true);
            txtItemCode.Text = ""; txtItemCode.Focus();
        }
    }

Step 5

paste it on page head tag..

<style type="text/css">
    .completeListStyle{
        height : 200px;
        width: 400px !important;
    overflow : auto;
    }
    </style>

Step 6

It Looks like....