Autocomplete Extender Control in ASP.NET

AutoComplete is an ASP.NET AJAX extender that can be attached to any TextBox control, and will associate that control with a popup panel to display words that begin with the prefix typed into the textbox.

Extenders are server controls that allow to extend a set of ASP.NET server controls by adding client side functionality.

Before Getting started its important to Get the AJAX Control Library from http://www.asp.net/AJAX/default.aspx

To Add the Controls to the Visual Studio Toolbox follow the following steps

  1. Right-click on the toolbox and choose “Add Tab”
  2. Give it a name for the Tab.
  3. Drag the toolkit .DLL file from your computer to the new tab you created.
  4. You should now see your new controls in your toolbox.

In this example i will show you a simple way of creating a Autocomplete textbox in asp.net.

1. Add a new Web Service :

[WebService(Namespace = “http://tempuri.org/”)]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

public class MyWebService : System.Web.Services.WebService
{
[WebMethod]
public string[] getList(string prefixText)
{
string[] Name = new String[6];
Name[0] = “Senthil”;
Name[1] = “Senthil Kumar”;
Name[2] = “Christ College”;
Name[3] = “Bangalore”;
Name[4] = “Senthil Kumar B”;
Name[5] = “Tamizh”;
return Name;
}
}

2. Create Controls in Default.aspx page.

Add Script Manager,standard TextBox control to the page alo9ng with the AJAX Control Toolkit’s Autocomplete Extender and Set the corresponding properties.

Your Default.aspx page should look like this.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"

Inherits="AutoComplete._Default" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"

TagPrefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> 
<title>Senthil Kumars' Autocomplete Extender</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body>
 <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager> <asp:TextBox ID="Names" runat="server"></asp:TextBox> <cc1:AutoCompleteExtender ID="NamesExtender" runat="server"

ServicePath="MyServices.asmx" ServiceMethod="getList"

MinimumPrefixLength="3" CompletionSetCount="10" TargetControlID="Names"> </cc1:AutoCompleteExtender> </div> </form> </body> </html>

Thats it now run the Application and type in few letters in the texbox you will see the suggestions available .

Explanation of few of the properties.

  • Service Path – the path to the web service .
  • Service Method – ththe method in the web service that retuens the List.
  • Minimum Prefix Length – number of characters a user must enter before the extender calls the web service.
  • Completion Set Count – This forces the control to only show a specific number of results
  • TargetControlID – The TextBox control where the user types content to be automatically completed .
  • ContextKey – This can be a Search Criteria that is specific to a user or page.
  • UseContextKey – Boolean value indicating whether a context key is used or Not.

There are quite a few properties you can check the complete list http://www.asp.net/AJAX/AjaxControlToolkit/Samples/AutoComplete/AutoComplete.aspx

Also Click here to find some interesting Autocomplete Textboxes .

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

One Response

  1. Thomas December 17, 2010 Reply
  2. Autocomplete Extender Control in ASP.NET | ProgramInDotnet August 7, 2011 Reply

Leave a Reply


x

Interesting BlogPosts to read

Passing Array of Integers to ASP.NET Web API REST Service
You can pass an array of integer to an ASP.NET Web Web API REST service by setting the [FromUri] att...
Webinar - Best Practices - Optimizing ASP.NET Performance, Part 1
DevExpress is hosting a webinar on the topic "Best Practices - Optimizing ASP.NET Performance, Part ...
How to Serialize Enum to String in ASP.NET ?
Sometimes when developing an web application , the developers might want to serialize Enum to its st...