Click here to Skip to main content
14,332,426 members

AJAX Auto-Suggest Textbox User Control

Rate this:
2.82 (10 votes)
Please Sign up or sign in to vote.
2.82 (10 votes)
12 Jun 2008CPOL
An AJAX textbox user control with auto-suggest functionality.


This article explains how to develop an AJAX-enabled textbox, which functions as an auto-suggest textbox, using a callback event handler.

In this article, I create a user control with a textbox. When you type something on the textbox, it will go to the server side (database, etc.) and fetch the results according to your textbox input and show it in a div.

Using the code

In this section, I will explain how to create the auto-suggest textbox.

I first create a user control with a textbox and a div element. In the onkeyup of the textbox, call a JavaScript function. Using the callback event handler, it calls the server-side method to filter the results based on what is typed in the textbox. In the user-control server-side, you have to add your code to get data from a DataSet and convert it to an XML string using the ds.getxml() method. In the client-side the XML string is converted to an HTML table using an XSL transform, and the transformed data is shown in a dynamic div tag.

Here is the ASP.NET code:

<!--<span class="code-comment">.ascx --></span>

<script type="text/javascript" src="Common.js"></script>
<table >
            <asp:TextBox ID="txtCust" runat="server" ></asp:TextBox>
            <div id="txtDiv" runat="server">
        <div id="myDiv"></div>
            <asp:HiddenField ID="hdnType" runat="server" />

Here is the code-behind:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class CustomTextBox : System.Web.UI.UserControl, ICallbackEventHandler
    string callbackResult;
    public void SetClassType(string clstype)
        hdnType.Value = clstype;
    protected void Page_Load(object sender, EventArgs e)
                "ShowMatchings('" + this.ClientID + "');");
        txtCust.Attributes.Add("onblur", "onBlur();"); 
        String cbReference = Page.ClientScript.GetCallbackEventReference(this, 
               "arg", "onCallbackComplete",null,true);
        String callbackScript = "function DoClientCallBack(arg)" + 
               "{ " + cbReference + ";}";        
        "CallServer", callbackScript, true);

    #region ICallbackEventHandler Members

    public string GetCallbackResult()
        return callbackResult;

    public void RaiseCallbackEvent(string eventArgument)
            callbackResult = xmlResult(eventArgument);
        catch (Exception e)
            throw new Exception("Error checking quantity");
    string xmlResult(string Filter)
        DataSet ds = new DataSet();       
        string[] str = Filter.Split('~');
        return "<?xml version='1.0' standalone='yes'?>" + 
               GetResult(resultDS(str[1]), str[0]) ;

    DataSet resultDS(string clsType)
        if (clsType == "City")
            Cities ct = new Cities();
            return ct.GetData();
            World wl = new World();
            return wl.GetData();
    string GetResult(DataSet ds,string Filter)
        DataView dv = ds.Tables[0].DefaultView;
        dv.RowFilter = "Name like '" + Filter + "%'";
        return ds.GetXml() +"~_~"+ ds.Tables[0].Rows.Count;

Add the user control to your project and add a reference to it to your page.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer (Senior)
India India
No Biography provided

Comments and Discussions

Generalarrow keys Pin
alokazia15-Jan-10 11:02
memberalokazia15-Jan-10 11:02 
GeneralNot Work In Firefox Pin
Jiten @ SPEC27-Oct-09 23:57
memberJiten @ SPEC27-Oct-09 23:57 
GeneralGood Pin
sskumar12319-Aug-09 20:50
membersskumar12319-Aug-09 20:50 
QuestionAnd what ? Pin
Gennady Oster15-Jun-08 23:49
memberGennady Oster15-Jun-08 23:49 
GeneralProblem Pin
obinna_eke13-Jun-08 6:20
memberobinna_eke13-Jun-08 6:20 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Posted 12 Jun 2008


19 bookmarked