Create an Ajax Auto-Suggest Textbox

Search for a state in the textbox below.


This auto-suggest textbox was created using Asp.Net Ajax controls. The AutoCompleteExtender control was used with an Asp.Net textbox. Using the Asp.Net Ajax controls makes the auto complete work very easy.

(This tutorial assumes you already downloaded and installed the Asp.Net Ajax Essentials and the Asp.Net Ajax Control Toolkit which can be downloaded here.)

  1. You want to make sure that one and only one ScriptManager control is on the page. Inside the ScriptManager control you want to include the web service that the AutoCompleteExtender control will be communicating with.

    <asp:ScriptManager ID="ScriptManager2" runat="server" >
    <Services>
    <asp:ServiceReference Path="MyWebService.asmx" />
    </Services>
    </asp:ScriptManager>

  2. You want to add an Asp.Net textbox control. Make sure to set the autocomplete="false" this will prevent suggestions of what you have entered before from being shown from the browser.

    <asp:TextBox ID="TextBox1" runat="server" CssClass="suggestText" autocomplete="off" />

  3. Add the AutoCompleteExtender control. Here is an example to what I set the attributes to.

    <ajaxToolkit:AutoCompleteExtender
    ID="AutoCompleteExtender2"
    runat="server"
    TargetControlID="TextBox1" /* The textbox the extend.*/
    CompletionInterval="10" /* How many milliseconds to wait.*/
    CompletionSetCount="10" /* How many results to show.*/
    MinimumPrefixLength="1" /* How many letters need to be typed.*/
    ServicePath="MyWebService.asmx" /* Path to the web service.*/
    ServiceMethod="AutoSuggest" /* The web services method.*/ />

  4. Now create your webservice. (If you don't know how to create a webservice click here.)

    [WebMethod]
    public string[] AutoSuggest(string prefixText, int count)
    {
    DataView dvStates = new DataView(clsGlobal.dtStates, string.Format("StateName like '{0}%'", prefixText), "", DataViewRowState.CurrentRows);

    System.Collections.Generic.List<string> items = new System.Collections.Generic.List<string>(count);

    for (int i = 0; i < dvStates.Count; i++)
    {
    items.Add(dvStates[i]["StateName"].ToString());
    }

    return items.ToArray();
    }

    This webservice searches through a DataView of states where the name of the State, "StateName", starts with the letters that the user entered. Here's how it works:

    First - The DataView is populated from a DataTable, clsGlobal.dtStates, that gets the States from a database.

    Next - A generic list is created to hold the results in an array, the count of the list is the value you specified as CompletionSetCount in the AutoCompleteExtender control.

    Third - A for loop is used to loop through the results from the DataView and enters them in the array.

    Last - The array is return to be loaded in the AutoCompleteExtender control.

    Remember the parameters for the method have to be (string prefixText, int count) or the AutoCompleteExtender will not work properly.

So there you have it. Easy steps to follow to create an auto-suggest textbox on your site. If you would like to see a video tutorial on how to add this control you can view it at http://www.asp.net/learn/videos/view.aspx?tabid=63&id=122
Join Now Join Now