Click here to Skip to main content
13,828,897 members
Click here to Skip to main content
Add your own
alternative version


19 bookmarked
Posted 13 Jun 2008
Licenced CPOL

AJAX Auto-Suggest Textbox User Control

, 13 Jun 2008
Rate this:
Please Sign up or sign in to vote.
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

You may also be interested in...


Comments and Discussions

Generalarrow keys Pin
alokazia15-Jan-10 12:02
memberalokazia15-Jan-10 12:02 
GeneralNot Work In Firefox Pin
Jiten @ SPEC28-Oct-09 0:57
memberJiten @ SPEC28-Oct-09 0:57 
GeneralGood Pin
sskumar12319-Aug-09 21:50
membersskumar12319-Aug-09 21:50 
QuestionAnd what ? Pin
Gennady Oster16-Jun-08 0:49
memberGennady Oster16-Jun-08 0:49 
GeneralProblem Pin
obinna_eke13-Jun-08 7:20
memberobinna_eke13-Jun-08 7: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.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01 | 2.8.190114.1 | Last Updated 13 Jun 2008
Article Copyright 2008 by subbiahkk
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid