Click here to Skip to main content
13,354,132 members (56,262 online)
Click here to Skip to main content
Add your own
alternative version


59 bookmarked
Posted 5 Nov 2008

Ajax ComboBox in ASP.NET

, 5 Nov 2008
Rate this:
Please Sign up or sign in to vote.
I have created a ComboBox control that mimics the functionality of Google suggest. As you type a search phrase, it automatically displays a list of matching entries in a dropdown.


I have created a ComboBox control that mimics the functionality of Google suggest.

As you type a search phrase, it automatically displays a list of matching entries in a dropdown without any postback.

See the picture below displaying matching moves with the ComboBox Control.


Using the Code

I have used five files to make this project:

  1. A user control ComboBox.ascx - It contains one textb<code>ox to enter and listbox to display result.
  2. A JavaScript file AjaxCallBack.js - Used to request and get response data from server
  3. A default.aspx to display the user control - It asks for input and displays the result
  4. A frmRemote.aspx - It gets data from the server and sends filtered result to the caller
  5. An EmployeeList.xml - It contains the list of employees

Whenever we press a key in the textbox, on onkeyup event, a getResult() function is called.

That calls a FillCombo() function that sends a request to the server and gets a response.

Here is the JavaScript to make a call and get a response from the server.

// JScript File
var XMLHttp; 
var requestURL = 'http://localhost:1455/AjaxComboBox/frmRemote.aspx?SearchText='; 
var is_ie = (navigator.userAgent.indexOf('MSIE') >= 0) ? 1 : 0; 
var is_ie5 = (navigator.appVersion.indexOf("MSIE 5.5")!=-1) ? 1 : 0; 
var is_opera = ((navigator.userAgent.indexOf("Opera6")!=-1)||
		(navigator.userAgent.indexOf("Opera/6")!=-1)) ? 1 : 0; 
var count=0;
var is_netscape = (navigator.userAgent.indexOf('Netscape') >= 0) ? 1 : 0; 
var _Combo;

function FillCombo(combo,txt)
    var url = requestURL + txt ;
    XMLHttp = GetXmlHttpObject(stateChangeHandler);'GET',url,true);
function GetXmlHttpObject(handler)
    var objXmlHttp = null;
    if (is_ie)
        var strObjName = (is_ie5) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP'; 
            objXmlHttp = new ActiveXObject(strObjName); 
            objXmlHttp.onreadystatechange = handler; 
           alert('IE detected, but object could not be created. 
		Verify that active scripting and activeX controls are enabled'); 
     else if (is_opera)
        alert('Opera detected. The page may not behave as expected.'); 
        objXmlHttp = new XMLHttpRequest(); 
        objXmlHttp.onload = handler; 
        objXmlHttp.onerror = handler; 
     return objXmlHttp; 
function stateChangeHandler() 
    if(XMLHttp.readyState==4 || XMLHttp.readyState == 'complete')
        var str = XMLHttp.responseText;    
        if (XMLHttp.responseXML.documentElement != null)
            alert("No Match");
function FillComboBox_Blur(Node)
    var NodeList;  
    NodeList = _Combo;
    var TextNodeList = Node.getElementsByTagName('Text'); 
    var IdNodeList = Node.getElementsByTagName('Id');     
    var textName; 
    var valueName;
    for (var count = NodeList.options.length-1; count >-1; count--)
        NodeList.options[count] = null;            
    for (var count = 0; count < TextNodeList.length; count++)
        textName = GetInnerText(TextNodeList[count]);  
        valueName = GetInnerText(IdNodeList[count]); 
        TempOption = new Option( textName, valueName,  false, false);
        NodeList.options[NodeList.length] = TempOption; 
        NodeList.size= NodeList.options.length;'block';
function GetInnerText (node)
    return (node.textContent || node.innerText || node.text) ;

A call from the JavaScript is made to the server. On the server, there is a file frmRemote.aspx, that retrieves the result from the XML file, filters it and sends the resultant data as response.

if (Request["SearchText"] != null)
            string SearchText = Request["SearchText"].ToString();
            int count = 0;
            string strXmlNames = "";

            if (SearchText != "")
                XPathDocument xDoc = new XPathDocument(System.Web.HttpContext.
		Current.Request.PhysicalApplicationPath + "EmployeeList.xml");
                XPathNavigator xNav = xDoc.CreateNavigator();

                XPathExpression strExpression = xNav.Compile("Employee/EmpName");

                XPathNodeIterator xIterator = xNav.Select(strExpression);

                while (xIterator.MoveNext())
                    XPathNavigator nav = xIterator.Current.Clone();
                    if (nav.Value.Trim().StartsWith(SearchText, true, null))
                        strXmlNames += "<element><Text>" + nav.Value + 
				"</Text> <Id>" + nav.Value + "</Id></element>";
                strXmlNames += "<element><Text>" + "Total search result: " + 
			count + "</Text> <Id>" + count + "</Id></element>";
            strXmlNames = "<?xml version=\"1.0\" ?><Records>" + strXmlNames + 

            Response.ContentType = "text/xml";


Point of Interest

The amazing thing about this control is that every time you enter a letter into the search box, an AJAX call is performed to retrieve a list of matching results from the server. 


  • 5th November, 2008: Initial post


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


About the Author

Najmul Hoda
Software Developer (Senior) Birla Soft
India India
Najmul Hoda is a Master of Computer Application.
He has worked with .Net technologies in web development and has been programming since 2007.
He is very comfortable in various languages,RDBMS & platforms from C# to VB.NET with Access & MS SQLServer from Javascript,AJAX to ASP.NET, MVC.

Besides programming he loves playing mouth organ, guitar, listening to music,singing, bike riding & cricket.

Free website chat software

You may also be interested in...

Comments and Discussions

QuestionDo you know how to manipulate the combobox ( using ajax3.0 in VS2008) Pin
rwmao9-Aug-10 14:48
memberrwmao9-Aug-10 14:48 
Generaldoesn´t work Pin
huicho8-Jan-10 11:42
memberhuicho8-Jan-10 11:42 
Generalproblem with unicode data Pin
amirghaf18-May-09 3:55
memberamirghaf18-May-09 3:55 
Generalnice Pin
Vuyiswa Maseko13-Feb-09 3:07
memberVuyiswa Maseko13-Feb-09 3:07 
GeneralI am getting error while running this application Pin
Win32Prog10-Nov-08 20:14
memberWin32Prog10-Nov-08 20:14 
GeneralRe: I am getting error while running this application Pin
Nazmul Hoda11-Nov-08 6:26
memberNazmul Hoda11-Nov-08 6:26 
QuestionCool Pin
Helbrax7-Nov-08 4:05
memberHelbrax7-Nov-08 4:05 
AnswerRe: Cool Pin
Nazmul Hoda7-Nov-08 7:53
memberNazmul Hoda7-Nov-08 7:53 

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
Web04 | 2.8.180111.1 | Last Updated 5 Nov 2008
Article Copyright 2008 by Najmul Hoda
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid