Click here to Skip to main content
14,365,441 members

Ajax ComboBox in ASP.NET

Rate this:
4.52 (16 votes)
Please Sign up or sign in to vote.
4.52 (16 votes)
5 Nov 2008CPOL
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

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
Vimalsoft(Pty) Ltd13-Feb-09 3:07
professionalVimalsoft(Pty) Ltd13-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
Najmul Hoda11-Nov-08 6:26
memberNajmul Hoda11-Nov-08 6:26 
QuestionCool Pin
Helbrax7-Nov-08 4:05
memberHelbrax7-Nov-08 4:05 
AnswerRe: Cool Pin
Najmul Hoda7-Nov-08 7:53
memberNajmul 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.

Posted 5 Nov 2008


59 bookmarked