Using AutoCompleteExtender of ajax in asp.net or how to use autocomplete property of ajax toolkit ?

In this tutorial i will show how to use AutoCompleteExtender of Ajax tool kit in asp.net

Steps are as follows:

1. Add scriptmanger.
2. Add AutocompleteExtender.
   

     <asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
      TargetControlID="TextBox1" ServiceMethod="GetCompletionList"
        UseContextKey="True" MinimumPrefixLength="1">
       asp:AutoCompleteExtender>

this will have TargetControlID as id of textbox.
MinimumPrefixlength is length of the text in textbox after which autoCompleteExtender
start showing suggestions.

  3. Add one textbox.

     <asp:TextBox ID="TextBox1" runat="server">asp:TextBox>

4. Now go to design mode & Click on Add AutoComplete Page Method.




5. After this you will see that some code is added to ur code behind file ,
 just replace it with this code
 (here i have bounded the colum from database for which i want suggestions ,
  you should change this with your database teble & column)
 (Here i have used Name Column of CountryRegion of Adventureworks Database )
[System.Web.Services.WebMethodAttribute(),
System.Web.Script.Services.ScriptMethodAttribute()]
public static string[] GetCompletionList
                           (string prefixText, int count, string contextKey)
{
    SqlConnection conn;
    SqlCommand cmd;
    string cmdString =
    "Select Name from Person.CountryRegion WHERE Name LIKE '" +
    prefixText + "%'";
    conn = new
    SqlConnection(@"Data Source=VRAKSH-VAIBHAVS;Initial Catalog=AdventureWorks;
                    User ID=sa;Password=data#123");
//         Put this string on one line in your code
    cmd = new SqlCommand(cmdString, conn);
    conn.Open();
    SqlDataReader myReader;
    List<string> returnData = new List<string>();
    myReader = cmd.ExecuteReader(CommandBehavior.CloseConnection);
    while (myReader.Read())
    {
        returnData.Add(myReader["Name"].ToString());
    }
  return returnData.ToArray();
 }

Just save & run ....

type just one character in your textbox & wait for 2-3 seconds.....
u will find suggestion box is shown under it.

Here is Full code.....


Source code......


<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
asp:ScriptManager>
<asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
TargetControlID="TextBox1" ServiceMethod="GetCompletionList"
UseContextKey="True" MinimumPrefixLength="1">
asp:AutoCompleteExtender>
<asp:TextBox ID="TextBox1" runat="server">asp:TextBox>
div>


code behind....

 protected void Page_Load(object sender, EventArgs e)
{

}

[System.Web.Services.WebMethodAttribute(),
System.Web.Script.Services.ScriptMethodAttribute()]
public static string[] GetCompletionList
                     (string prefixText, int count, string contextKey)
{
    SqlConnection conn;
    SqlCommand cmd;
    string cmdString =
    "Select Name from Person.CountryRegion WHERE Name LIKE '" +
    prefixText + "%'";
    conn = new
    SqlConnection(@"Data Source=VRAKSH-VAIBHAVS;Initial Catalog=AdventureWorks;
                    User ID=sa;Password=data#123");
//         Put this string on one line in your code
    cmd = new SqlCommand(cmdString, conn);
    conn.Open();
    SqlDataReader myReader;
    List<string> returnData = new List<string>();
    myReader = cmd.ExecuteReader(CommandBehavior.CloseConnection);
    while (myReader.Read())
    {
        returnData.Add(myReader["Name"].ToString());
    }
  return returnData.ToArray();
 }