Click here to Skip to main content
12,759,971 members (30,644 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


50 bookmarked
Posted 3 Sep 2010

Ajax AutoComplete in ASP.NET

, 19 Oct 2010 CPOL
Rate this:
Please Sign up or sign in to vote.
Ajax AutoComplete in ASP.NET

Without using AjaxControlToolKit, we can implement AutoComplete Extender using pure Ajax Call. This article explains how to do 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:

GetTable(string sqlQuery) 

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

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.SqlClient;
using System.Configuration;
using System.Data;
/// <span class="code-SummaryComment"><summary>

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

<%@ WebHandler Language="C#" Class="Handler" %>

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.

<%@ Page Language="C#" AutoEventWireup="true"  
	CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

<html xmlns="">
<head runat="server">
     <form id="form1" runat="server">

         <asp:TextBox ID="txtName" runat="server" 
           <div id="myDiv"></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; } }
      "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 = "";

Sample  ;


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

Tags Ajax AutoComplete, Ajax Example.


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


About the Author

raju melveetilpurayil
Software Developer (Senior)
United Kingdom United Kingdom
Microsoft Certified Professional Developer.

You may also be interested in...

Comments and Discussions

GeneralMy vote of 5 Pin
jpmontoya18211-Jan-12 10:03
memberjpmontoya18211-Jan-12 10:03 

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 | Terms of Use | Mobile
Web01 | 2.8.170217.1 | Last Updated 19 Oct 2010
Article Copyright 2010 by raju melveetilpurayil
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid