Web Development Tips: ASP.NET Autocomplete

Web Development Tips: ASP.NET Autocomplete
Page content

What is ASP.NET Autocomplete?

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.

How to implement ASP.NET Autocomplete?

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:

For a functional implemention, you would customize the above service method to use the prefixText and search a database for relevant terms. Below is a screenshot of an example that searches a database of college sports teams based upon the text entered and returns matching results:

Working ASP.NET Autocomplete Implementation

Additional Resources

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.

This post is part of the series: Using and Extending the ASP.NET Textbox Control

Learn about the ASP.NET Textbox control, including how to implement it on your pages, how to use the control’s data on your pages, and how to extend the control with AJAX extenders.

  1. Using an ASP.NET Textbox
  2. Using the ASP.NET Autocomplete Extender