Click here to Skip to main content
Click here to Skip to main content

Ajax ComboBox in ASP.NET

, 5 Nov 2008 CPOL
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.

Introduction

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.

AjaxComboBox.gif

Using the Code

I have used five files to make this project:

  1. A user control ComboBox.ascx - It contains one textbox 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)
{
    _Combo=combo;
    var url = requestURL + txt ;
                       
    XMLHttp = GetXmlHttpObject(stateChangeHandler);
    XMLHttp.open('GET',url,true);
    XMLHttp.send(null);
}
    
function GetXmlHttpObject(handler)
{
    var objXmlHttp = null;
    if (is_ie)
    { 
        var strObjName = (is_ie5) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP'; 
        try
        { 
            objXmlHttp = new ActiveXObject(strObjName); 
            objXmlHttp.onreadystatechange = handler; 
        } 
        catch(e)
        { 
           alert('IE detected, but object could not be created. 
		Verify that active scripting and activeX controls are enabled'); 
           return; 
        } 
     } 
     else if (is_opera)
     { 
        alert('Opera detected. The page may not behave as expected.'); 
        return; 
     } 
     else
     { 
        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)
        {   
            FillComboBox_Blur(XMLHttp.responseXML.documentElement);
        }
        else
        {
            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;
        NodeList.style.display='block';
    } 
    if(TextNodeList.length==0)
    {
        NodeList.style.display='none';          
    }
}     
    
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>";
                        count++;
                    }
                }                
            }
            if(count>0)
                strXmlNames += "<element><Text>" + "Total search result: " + 
			count + "</Text> <Id>" + count + "</Id></element>";
            strXmlNames = "<?xml version=\"1.0\" ?><Records>" + strXmlNames + 
			"</Records>";

            Response.Clear();
            Response.ContentType = "text/xml";

            Response.Write(strXmlNames);
            Response.End();
        } 

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. 

History

  • 5th November, 2008: Initial post

License

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

Share

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.
 
Besides programming he loves playing mouth organ, guitar, listening to music,singing, bike riding & cricket.


Najmul's Articles
 
You can get my all article at
www.dotnetlogix.com


Comments and Discussions

 
QuestionDo you know how to manipulate the combobox ( using ajax3.0 in VS2008) Pinmemberrwmao9-Aug-10 14:48 
Generaldoesn´t work Pinmemberhuicho8-Jan-10 11:42 
Generalproblem with unicode data Pinmemberamirghaf18-May-09 3:55 
Generalnice PinmemberVuyiswa Maseko13-Feb-09 3:07 
hi Najmul
 
Nice, am just doing a Walkthrough your Articles
 
Vuyiswa Maseko,
 
Few companies that installed computers to reduce the employment of clerks have realized their expectations.... They now need more and more expensive clerks even though they call them "Developers" or "Programmers."
 
C#/VB.NET/ASP.NET/SQL7/2000/2005/2008
http://www.vuyiswamaseko.tiyaneProperties.co.za
vuyiswam@its.co.za
 

GeneralI am getting error while running this application PinmemberWin32Prog10-Nov-08 20:14 
GeneralRe: I am getting error while running this application PinmemberNazmul Hoda11-Nov-08 6:26 
QuestionCool PinmemberHelbrax7-Nov-08 4:05 
AnswerRe: Cool PinmemberNazmul Hoda7-Nov-08 7:53 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.141223.1 | Last Updated 5 Nov 2008
Article Copyright 2008 by Najmul Hoda
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid