Click here to Skip to main content
15,868,141 members
Articles / Web Development / ASP.NET
Article

AJAX Auto-Suggest Textbox User Control

Rate me:
Please Sign up or sign in to vote.
2.82/5 (10 votes)
12 Jun 2008CPOL1 min read 45.8K   578   19   5
An AJAX textbox user control with auto-suggest functionality.

Introduction

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:

ASP.NET
<!--.ascx -->

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

Here is the code-behind:

C#
//.ascx.cs
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)
    {
        txtCust.Attributes.Add("onkeyup", 
                "ShowMatchings('" + this.ClientID + "');");
        txtCust.Attributes.Add("onblur", "onBlur();"); 
        String cbReference = Page.ClientScript.GetCallbackEventReference(this, 
               "arg", "onCallbackComplete",null,true);
        String callbackScript = "function DoClientCallBack(arg)" + 
               "{ " + cbReference + ";}";        
        Page.ClientScript.RegisterClientScriptBlock(this.GetType(),
        "CallServer", callbackScript, true);
    }

    #region ICallbackEventHandler Members

    public string GetCallbackResult()
    {
        return callbackResult;
    }

    public void RaiseCallbackEvent(string eventArgument)
    {
        try
        {
            callbackResult = xmlResult(eventArgument);
        }
        catch (Exception e)
        {
            Trace.Write(e.Message);
            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();
        }
        else
        {
            World wl = new World();
            return wl.GetData();
        }
    }
    string GetResult(DataSet ds,string Filter)
    {
        DataView dv = ds.Tables[0].DefaultView;
        dv.RowFilter = "Name like '" + Filter + "%'";
        ds.Tables.Clear();
        ds.Tables.Add(dv.ToTable());
        ds.AcceptChanges();
        return ds.GetXml() +"~_~"+ ds.Tables[0].Rows.Count;
    }
    #endregion
}

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

License

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


Written By
Software Developer (Senior)
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
Generalarrow keys Pin
alokazia15-Jan-10 11:02
alokazia15-Jan-10 11:02 
GeneralNot Work In Firefox Pin
Jiten @ SPEC27-Oct-09 23:57
Jiten @ SPEC27-Oct-09 23:57 
GeneralGood Pin
sskumar12319-Aug-09 20:50
sskumar12319-Aug-09 20:50 
QuestionAnd what ? Pin
Gennady Oster15-Jun-08 23:49
Gennady Oster15-Jun-08 23:49 
GeneralProblem Pin
obinna_eke13-Jun-08 6:20
obinna_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.