AJAX Control Toolkit – How To Use AutoCompleteExtender

These days I had a situation where I needed to use a control which is a part of the AJAX Control Toolkit, concretely the AutoCompleteExtender control. I had a TextBox control in a web form where the user needed to add another user to a given list, but for easier typing and not having to remember the whole name and surname, I needed to provide some kind of suggestions from the list of the existing users in the database. So, I downloaded the AJAX Control Toolkit and used it to provide this kind of functionality. In this blog, I will provide an explanation of implementing this functionality and example source code of using this control.

First of all, you have to download the AJAX Control Toolkit from here.

Then, you need to include it in your project as a reference in your Microsoft Visual Studio project:

Find the folder where AjaxControlToolkit.dll is located, select it and click OK.

After you have added the AJAX Control Toolkit to your project, if you want to use it in your web form, you need to add this line of code in the beginning of your page:

<%@ Register TagPrefix="ajax" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit"%>

This means that I will be using AJAX controls on this page. If I want to access them, I will use the prefix ajax.

But, I also need to include the ToolkitScriptManager inside a <form> tag with property runat="server" as follows:

<form id="form1" runat="server">
    <div>
        <table style="width: 51%;">
            <tr>
                <td>
                    <asp:Label ID="Label1" runat="server" Text="Type some text here:"></asp:Label>
                </td>
                <td>
                    <ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
                    </ajax:ToolkitScriptManager>

…                                    

In order to get the suggestions, I have to assign an AutoCompleteExtender with a TextBox, in order to get the suggestions while typing in the field. Then, we have the following code:

<asp:TextBox ID="TextBox1" runat="server" Width="224px"></asp:TextBox>
<ajax:AutoCompleteExtender
                            ID="AutoCompleteExtender1"
                            runat="server"
                            ServicePath="AutoCompleteService.asmx"
                            ServiceMethod="GetSuggestions"
                            TargetControlID="TextBox1"
                            MinimumPrefixLength="1"
                            CompletionSetCount="10" CompletionInterval="200">
</ajax:AutoCompleteExtender>

So, what do these lines mean? We see several properties here, but the most relevant for us are:

1. ServicePath – this is a path to a web service, which we will use for defining our functions for suggesting items.
2. ServiceMethod – this is the function that will return our suggestion results. It gives us an array of strings containing the data.
3. TargetControlID – the target control to which we will attach our AutoCompleteExtender.
4. MinimumPrefixLength – the length of the string after which we’ll get suggestions.

In the AutoCompleteService.asmx, which contains our function GetSuggestions to give us the resulting items, we need to remove the comment characters right above the definition of the web service, in order to use our web service for AJAX controls:

// [System.Web.Script.Services.ScriptService]
public class AutoCompleteService : System.Web.Services.WebService

Then, we have the web method GetSuggestions that retrives users from the database whose usernames start with whatever typed in the TextBox:

[WebMethod]
public string[] GetSuggestions(string prefixText, int count)
{
            List<string> responses = new List<string>();
            try
            {
                SqlConnection sql = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=" + 
                    System.IO.Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "DatabaseFolder") + @"\SQLDatabase.mdf;Integrated Security=True;User Instance=True");
                sql.Open();

                SqlCommand command = new SqlCommand("SELECT * FROM Users ORDER BY username ASC", sql);
                SqlDataReader reader = command.ExecuteReader();

                while (reader.Read())
                {
                    string s = reader["username"].ToString();
                    if (s.StartsWith(prefixText))
                    {
                        responses.Add(s);
                    }
                }

                reader.Close();
                sql.Close();
            }
            catch (Exception exc)
            {
            }

            return responses.ToArray();
}

The above code can be easily modified to your own needs. Hope that this blog post helps you in future. The example source code can be downloaded here.

Regards,

Stojanche