Click here to Skip to main content
15,869,940 members
Articles / Web Development / ASP.NET

Ajax AutoComplete in ASP.NET

Rate me:
Please Sign up or sign in to vote.
4.78/5 (26 votes)
19 Oct 2010CPOL1 min read 72K   52   25
Ajax AutoComplete in ASP.NET

Without using AjaxControlToolKit, we can implement AutoComplete Extender using pure Ajax Call. This article explains how to make AutoComplete Extender.

OnKeyUp event helps you to fetch data from database with Ajax call. Here, one Handler.ashx handles the AJAX request form Client. I add a Class file to handle database operations to better coding practice. Below, I explain the database helper Class. Class has one method:

C#
GetTable(string sqlQuery) 

This returns DataTable after fetching data from database. And also includes Provide Class, this Class helps to get SqlConnection string.

C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.SqlClient;
using System.Configuration;
using System.Data;
/// <summary>
/// Summary description for DBHelper
/// </summary>
public class DBHelper
{
    SqlConnection connection;
    SqlDataAdapter adapter;
    SqlCommand command;
    DataTable dataTable;
    public DBHelper()
    {
    }
    /// <summary>
    /// 
    /// </summary>
    /// <param name="sqlQuery">passing SQL Query here
    /// <returns>DataTable object is returned</returns>
    public DataTable GetTable(string sqlQuery)
    {
        //creating new instance of Datatable
        dataTable = new DataTable();
        connection = Provider.GetConnection();
        command = new SqlCommand(sqlQuery, connection);
        //Open SQL Connection
        connection.Open();
            try
            {
                adapter = new SqlDataAdapter(command);
                adapter.Fill(dataTable);
            }
            catch
            { }
            finally
            {
                //Closing Sql Connection 
                connection.Close();
            }
        return dataTable;
    }
}
public class Provider
{
    public static SqlConnection GetConnection()
    {
        //creating SqlConnection
        return new SqlConnection(ConfigurationManager.AppSettings["sqlConn"]);
    }
} 

Now we can look into Handler file. When request comes from Ajax Call from Client, it passes the data into our Database helper Class, handler file holds the data in DataTable. Result data are formatted in a table and written in the context. We can add JavaScript function for selecting the data, here api_helper.AddtoTaxtBox(selectedItem) manages client section of data.

Check Handler File

ASP.NET
<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
using System.Data;
public class Handler : IHttpHandler {
    public void ProcessRequest (HttpContext context) {

        HttpRequest request = HttpContext.Current.Request;
        //checking string null or empty
        if (!string.IsNullOrEmpty(request.QueryString["name"]))
        {
            string name=request.QueryString["name"];
            //creating instance of new database helper
            DBHelper objDBHelper = new DBHelper();
            //creating Sql Query
            string sqlQuery = string.Format
		("SELECT Name FROM User WHERE Name LIKE '{0}%'", name);
            //filling data from database
            DataTable dataTable = objDBHelper.GetTable(sqlQuery);

             string table = string.Empty;
            //table for hold data
            table = "<table width='100%'>";
            string td = string.Empty;
            //checking datatable
                if (dataTable.Rows.Count > 0)
                {
                    for (int i = 0; i < dataTable.Rows.Count; i++)
                    {
                        //adding table rows
                        td += string.Format("<tr><td class='select' 
			onclick='api_helper.AddtoTaxtBox(this.innerHTML)'>
			{0}</td></tr>", dataTable.Rows[i][0].ToString());
                    }
                }
                table += td + "</table>";
                context.Response.Write(table);
        }
    }
    public bool IsReusable {
        get {
            return false;
        }
    }
}

Now we can check how Ajax works. On Textbox onKeyUp event, call the Ajax code. It sends the entered value into server using Ajax and the result is displayed in div control under the search textbox.

ASP.NET
<%@ Page Language="C#" AutoEventWireup="true"  
	CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
     <form id="form1" runat="server">
       <div>

         <asp:TextBox ID="txtName" runat="server" 
		onkeyup="api_helper.callAjax();"></asp:TextBox>
           <div id="myDiv"></div>
           
      </div>
             <script language="javascript" type="text/javascript">

               if (typeof (api_helper) == 'undefined') { api_helper = {} }

               api_helper.doAjax = function(HandlerUrl, displayDiv) {
                var Req; try { Req = new XMLHttpRequest(); } 
		catch (e) { try { Req = new ActiveXObject("Msxml2.XMLHTTP"); }
		catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } 
		catch (e) { return false; } } } Req.onreadystatechange = function() {
		if (Req.readyState == 4) { var d = document.getElementById(displayDiv); 
		d.innerHTML = Req.responseText; } }
                Req.open("GET", HandlerUrl, true); Req.send(null);
              }

               api_helper.callAjax = function() {
                var text = document.getElementById("txtName").value;
                if (text != "") {
                    var requestUrl = "Handler.ashx?name=" + text;
                    var displayDiv="myDiv";
                    api_helper.doAjax(requestUrl, displayDiv);
                }
              }

              api_helper.AddtoTaxtBox = function(txt) {
                document.getElementById("txtName").value = txt;
                document.getElementById("myDiv").innerHTML = "";
              }
            </script>         
     </form>
  </body>
</html>  

Sample

Thanks for reading this article. Please feel free to comment.

Tags: Ajax AutoComplete, Ajax Example.

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)
United Kingdom United Kingdom
Microsoft Certified Professional Developer.

Comments and Discussions

 
GeneralMy vote of 4 Pin
Leonardo Paneque24-Apr-12 12:07
Leonardo Paneque24-Apr-12 12:07 
GeneralMy vote of 5 Pin
jpmontoya18211-Jan-12 9:03
jpmontoya18211-Jan-12 9:03 
GeneralMy vote of 2 Pin
StianSandberg29-Dec-11 23:32
StianSandberg29-Dec-11 23:32 
GeneralRe: My vote of 2 Pin
raju melveetilpurayil8-Feb-14 15:48
professionalraju melveetilpurayil8-Feb-14 15:48 
GeneralMy vote of 5 Pin
Suraj S Koneri28-Nov-11 22:36
Suraj S Koneri28-Nov-11 22:36 
GeneralRe: My vote of 5 Pin
raju melveetilpurayil29-Nov-11 0:21
professionalraju melveetilpurayil29-Nov-11 0:21 
GeneralMy vote is 5 Pin
Ali Al Omairi(Abu AlHassan)28-Dec-10 9:59
professionalAli Al Omairi(Abu AlHassan)28-Dec-10 9:59 
GeneralRe: My vote is 5 Pin
raju melveetilpurayil23-Jan-11 13:17
professionalraju melveetilpurayil23-Jan-11 13:17 
GeneralMy vote of 5 Pin
Ali Al Omairi(Abu AlHassan)28-Dec-10 9:56
professionalAli Al Omairi(Abu AlHassan)28-Dec-10 9:56 
GeneralRe: My vote of 5 Pin
raju melveetilpurayil21-Mar-11 16:15
professionalraju melveetilpurayil21-Mar-11 16:15 
GeneralMy vote of 5 Pin
Shahriar Iqbal Chowdhury/Galib16-Nov-10 23:44
professionalShahriar Iqbal Chowdhury/Galib16-Nov-10 23:44 
GeneralMy vote of 5 Pin
Brij15-Oct-10 6:33
mentorBrij15-Oct-10 6:33 
GeneralMy vote of 5 Pin
Rehan Hussain10-Oct-10 21:14
Rehan Hussain10-Oct-10 21:14 
GeneralRe: My vote of 5 Pin
raju melveetilpurayil15-Oct-10 0:26
professionalraju melveetilpurayil15-Oct-10 0:26 
GeneralMy vote of 5 Pin
swapna.kurian9-Oct-10 7:26
swapna.kurian9-Oct-10 7:26 
GeneralRe: My vote of 5 Pin
raju melveetilpurayil9-Oct-10 20:21
professionalraju melveetilpurayil9-Oct-10 20:21 
GeneralMy vote of 5 Pin
mdshohelrana3-Oct-10 20:34
mdshohelrana3-Oct-10 20:34 
GeneralNICE Pin
kashyap20106-Sep-10 19:54
kashyap20106-Sep-10 19:54 
GeneralRe: NICE Pin
raju melveetilpurayil7-Sep-10 12:56
professionalraju melveetilpurayil7-Sep-10 12:56 
GeneralRe: NICE Pin
shakil030400319-Oct-10 5:37
shakil030400319-Oct-10 5:37 
GeneralRe: NICE Pin
raju melveetilpurayil19-Oct-10 5:40
professionalraju melveetilpurayil19-Oct-10 5:40 
GeneralMy vote of 5 Pin
senpaulose4-Sep-10 4:43
senpaulose4-Sep-10 4:43 
GeneralRe: My vote of 5 Pin
raju melveetilpurayil6-Sep-10 0:10
professionalraju melveetilpurayil6-Sep-10 0:10 
GeneralRe: My vote of 5 Pin
EbenRoux6-Sep-10 18:52
EbenRoux6-Sep-10 18:52 
GeneralRe: My vote of 5 Pin
raju melveetilpurayil7-Sep-10 13:02
professionalraju melveetilpurayil7-Sep-10 13:02 

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.