Creating auto-complete TextBox using AutoCompleteExtender Control of AJAX


This article demonstrats how to create an auto-complete TextBox in ASP.Net using Ajax's AutoCompleteExtender.

Note: We are assuming that you have already completed the installion of the Ajax Toolkit as well as have a basic understanding of coding.

This article provides a few steps which will be easy to follow.

Step 1:

Before you can use any of the Ajax Control Toolkit controls in a page, you first need to add a ScriptManager to the page. You can drag the ScriptManager from the Visual Studio Toolbox window onto the page. The ScriptManager is located in the Ajax Control Toolkit tab under the Toolbox.

Step 2:

Add a TextBox Control to the page.

Step 3:

Add an AutoCompleteExtender; you can drag the AutoCompleteExtender from the ajax control toolkit.

        <cc1:AutoCompleteExtender ID="TextBox1_AutoCompleteExtender" runat="server"
            DelimiterCharacters="" Enabled="True" ServiceMethod="GetCompletionList"
            ServicePath="" TargetControlID="TextBox1" UseContextKey="True">
        </cc1:AutoCompleteExtender>

Step 4:

Add a Service method in code. Expanding the textbox control smart tag, select the add AutoComplete page method option from the provided menu. This action creates a service method in code behind for your page; it looks like this:

[System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
public static string[] GetCompletionList(string prefixText, int count, string contextKey) {
return default(string[]);
}

Step 5:

Write the following code in the service method.

[System.Web.Services.WebMethodAttribute(),System.Web.Script.Services.ScriptMethodAttribute()]
 public static string[] GetCompletionList(string prefixText, int count,string contextKey)
    {
 string[] country = { "America", "italy", "india", "Russia", "england", "japan" };
        return (from m in country where m.StartsWith(prefixText, StringComparison.CurrentCultureIgnoreCase) select m).Take(count).ToArray();

}

Run your website...............


Similar Articles