ASP.NET(C#)中的自动下拉框的实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<title>Ajax实现自动提示的文本框</title> 
<style> 
<!-- 
body{ 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:12px; padding:0px; margin:5px; 
} 
form{padding:0px; margin:0px;} 
input{ 
    /* 用户输入框的样式 */
    font-family:Arial, Helvetica, sans-serif; 
    font-size:12px; border:1px solid #000000; 
    200px; padding:1px; margin:0px; 
} 
#popup{ 
    /* 提示框div块的样式 */
    position:absolute; 202px; 
    color:#004a7e; font-size:12px; 
    font-family:Arial, Helvetica, sans-serif; 
    left:41px; top:25px; 
} 
#popup.show{ 
    /* 显示提示框的边框 */    
    border:1px solid #004a7e; 
} 
#popup.hide{ 
    /* 隐藏提示框的边框 */
    border:none; 
} 
/* 提示框的样式风格 */
ul{ 
    list-style:none; 
    margin:0px; padding:0px; 
} 
li.mouseOver{ 
    background-color:#004a7e; 
    color:#FFFFFF; 
} 
li.mouseOut{ 
    background-color:#FFFFFF; 
    color:#004a7e; 
} 
--> 
</style> 
<script language="javascript"> 
var oInputField;    //考虑到很多函数中都要使用 
var oPopDiv;        //因此采用全局变量的形式 
var oColorsUl; 
var xmlHttp; 
function createXMLHttpRequest(){ 
    if(window.ActiveXObject) 
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    else if(window.XMLHttpRequest) 
        xmlHttp = new XMLHttpRequest(); 
} 
function initVars(){ 
    //初始化变量 
    oInputField = document.forms["myForm1"].colors; 
    oPopDiv = document.getElementById("popup"); 
    oColorsUl = document.getElementById("colors_ul"); 
} 
function clearColors(){ 
    //清除提示内容 
    for(var i=oColorsUl.childNodes.length-1;i>=0;i--) 
        oColorsUl.removeChild(oColorsUl.childNodes[i]); 
    oPopDiv.className = "hide"; 
} 
function setColors(the_colors){ 
    //显示提示框，传入的参数即为匹配出来的结果组成的数组 
    clearColors();    //每输入一个字母就先清除原先的提示，再继续 
    oPopDiv.className = "show"; 
    var oLi; 
    for(var i=0;i<the_colors.length;i++){ 
        //将匹配的提示结果逐一显示给用户 
        oLi = document.createElement("li"); 
        oColorsUl.appendChild(oLi); 
        oLi.appendChild(document.createTextNode(the_colors[i])); 
  
        oLi.onmouseover = function(){ 
            this.className = "mouseOver";    //鼠标经过时高亮 
        } 
        oLi.onmouseout = function(){ 
            this.className = "mouseOut";    //离开时恢复原样 
        } 
        oLi.onclick = function(){ 
            //用户点击某个匹配项时，设置输入框为该项的值 
            oInputField.value = this.firstChild.nodeValue; 
            clearColors();    //同时清除提示框 
        } 
    } 
} 
function findColors(){ 
    initVars();        //初始化变量 
    if(oInputField.value.length > 0){ 
        createXMLHttpRequest();        //将用户输入发送给服务器 
        var sUrl = "9-10.aspx?sColor=" + oInputField.value + "&timestamp=" + new Date().getTime(); 
        xmlHttp.open("GET",sUrl,true); 
        xmlHttp.onreadystatechange = function(){ 
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200){ 
                var aResult = new Array(); 
                if(xmlHttp.responseText.length){ 
                    aResult = xmlHttp.responseText.split(","); 
                    setColors(aResult);    //显示服务器结果 
                } 
                else
                    clearColors(); 
            } 
        } 
        xmlHttp.send(null); 
    }         
    else
        clearColors();    //无输入时清除提示框（例如用户按del键） 
} 
</script> 
</head> 
<body> 
<form method="post" name="myForm1"> 
Color: <input type="text" name="colors" id="colors" onkeyup="findColors();" /> 
</form> 
<div id="popup"> 
    <ul id="colors_ul"></ul> 
</div> 
</body> 
</html>