Creating a simple auto-complete textbox
This tutorial assumes you have already completed the installing of the Ajax Toolkit as well as have a basic understanding of Visual Web Developer. If you have not completed either of the above please go back to the intro to visual web developer and the tutorial I wrote on installing the Ajax toolkit before you continue.
This tutorial will be completed in 4 simple steps which will be easy to follow. The code will be provided in each step as well as a solution file that was included in the original download.
Need help with Windows Dedicated Hosting? Try Server Intellect I'm a happy customer!
Step 1 – Add a toolkitScriptManager
Before you can use any of the Ajax Control Toolkit controls in a page, you first need to add a ToolkitScriptManager to the page. You can drag the ToolkitScriptManager from the Visual Studio Toolbox window onto the page. The ToolkitScriptManager is located in the Ajax Control Toolkit tab under the Toolbox.
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
Step 2 – Add a Textbox Control
The AutoCompleteExtender works with a standard ASP.NET TextBox control. In Design view, drag a TextBox control from under the Standard tab in the Toolbox onto your page.
Now change the id of the TextBox to txtMovie. You can do this in the properties panel
<asp:TextBox ID="txtMovie" runat="server"></asp:TextBox>
Step 3 – Add an AutoComplete Extender
The next step is to apply an AutoCompleteExtender control to the TextBox.
View the code below to understand how to add it
<asp:AutoCompleteExtender
ID="AutoCompleteExtender1"
TargetControlID="txtMovie"
runat="server" />
Step 4 – Add a Page Method
If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!
The final step is to create a method that returns the auto-complete suggestions.
You can return auto-complete suggestions from an ASMX Web service, a WCF Web service, or a static page method.
We will be using the Static Page Method
The easiest way to add the static page method is to click on the Add AutoComplete page method smart tag option.
[System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
public static string[] GetCompletionList(string prefixText, int count, string contextKey) {
return default(string[]);
}
4) Notice that this method is passed parameters which represent what the user has typed into the TextBox and the number of auto-complete suggestions to show.
The following GetCompletionList() method returns a matching movie from a list of movies
[System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
public static string[] GetCompletionList(string prefixText, int count, string contextKey) {
// Create array of movies
string[] movies = {"Star Wars", "Star Trek", "Superman", "Memento", "Shrek", "Shrek II"};
// Return matching movies
return (from m in movies where m.StartsWith(prefixText,StringComparison.CurrentCultureIgnoreCase) select m).Take(count).ToArray();
}
Test your application by running and entering in one of the movies. By default the autocomplete function will not run until three characters are typed into the field. You can change this by changing the default MinimumPrefixLength property.
If you're ever in the market for some great Windows web hosting, try Server Intellect.We have been very pleased with their services and most importantly, technical support.
