Using the ASP.NET Autocomplete Extender

If you have recently used Google's web search, then you have seen this functionality first hand. When you start typing a search term, Google will show you a list of common searches from their database that are prefixed with what you have typed.

Please note that this behavior should not be confused with a web browser's autocomplete history, which displays a list of recent items that you have personally entered into text boxes. A browser's autocomplete history is generated from the local machine, unlike ASP.NET autocomplete which is generated by the server.

The ASP.NET autocomplete functionality is provided by an ASP.NET AJAX Extender, which you can attach to any ASP.NET textbox control on your web page. When a user begins to type into the textbox, the extender will query either a web service or a page method and return items that are prefixed with what the user has currently entered, which are then displayed in a panel below the text box for easy selection and reference.

To implement this functionality, you will need four things: a textbox control to extend, the extender from the ASP.NET AJAX Toolkit, a web service or page method to query, and data to search for relevant results. Examples are the best way to learn ASP.NET, so let's take a look at a very quick implementation.

Our sample page contains a text box with ID of "txtAutoComplete", and then immediately below that we add our ASP.NET AutoComplete Extender control with a TargetControl ID that references the textbox ID. The ServiceMethod references the page method that will return results to display, as we define below.

<asp:TextBox runat="server" ID="txtAutoComplete" />

<asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="txtAutoComplete" ServiceMethod="GetCompletionList" />

To make this easy we want to use a page method to return results instead of building a web service. This method would go in the code behind the page that contains the above textbox and extender, and must have a very specific signature so that it can be called by the ASP.NET autocomplete extender. Here is a brief example that returns a static list of items:

[System.Web.Services.WebMethod]

[System.Web.Script.Services.ScriptMethod]

public static string[] GetCompletionList(string prefixText, int count)

{

//Place your code to create a string array here. It should query some data using the prefixText and count

string[] list = {"Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"};

return list;

}

This is how the above example would look on your page:

click to enlarge

click to enlarge

This article assumes that you have some familiarity with ASP.NET and the ASP.NET AJAX Toolkit, which you can find here. For specifics and properties of the ASP.NET Autocomplete extender, view its page here.