ASP.NET 中的 Ajax ComboBox

• 下载源代码 - 5.77 KB 

引言

我创建了一个 ComboBox 控件，它模仿了 Google 建议的功能。

当您键入搜索词时，它会自动在下拉列表中显示匹配的条目，而无需任何回发。

请参阅下方的图片，显示与 ComboBox 控件匹配的条目。

Using the Code

我使用了五个文件来完成这个项目

1. 一个用户控件 ComboBox.ascx - 它包含一个 textbox 用于输入，一个 listbox 用于显示结果。
2. 一个 JavaScript 文件 AjaxCallBack.js - 用于向服务器请求和获取响应数据
3. 一个 default.aspx 用于显示用户控件 - 它要求输入并显示结果
4. 一个 frmRemote.aspx - 它从服务器获取数据，并将过滤后的结果发送给调用者
5. 一个 EmployeeList.xml - 它包含员工列表

每当我们在 textbox 中按下按键时，都会调用 onkeyup 事件中的 getResult() 函数。

该函数会调用一个 FillCombo() 函数，该函数向服务器发送请求并获取响应。

以下是用于向服务器发出调用并获取响应的 JavaScript 代码。

// JScript File
var XMLHttp; 
var requestURL = 'https://: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) ;
}

从 JavaScript 向服务器发出调用。 在服务器上，有一个文件 frmRemote.aspx，它从 XML 文件中检索结果，对其进行过滤，并将结果数据作为响应发送出去。

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();
        } 

看点

这个控件的惊人之处在于，每次您在搜索框中输入一个字母时，都会执行 AJAX 调用以从服务器检索匹配结果的列表。

历史

• 2008 年 11 月 5 日：初始发布