ASP.NET 可输入下拉原型

<div style="position:relative">
<style type="text/css">
#txtPerson{
    border: none;
    left: 2px;
    line-height: 17px;
    position: absolute;
    top: 1px;
    z-index: 1;
    width:148px;
}
#ulPerson
{
    border:solid 1px #ccc;
    padding-left:10px;
    background-color:white;
    line-height: 17px;
    position: absolute;
    z-index: 1;
    top:5px;
    width:148px;
    list-style:none;
    overflow-y:scroll;
    height:200px;
    display:none;
}

#ulPerson li
{
   cursor:default;
}

#ulPerson li.active
{
    font-weight:bold;
    text-decoration:underline
}

#ulPerson li.selected
{
    font-weight:bold;
}

#ulPerson li:hover
{
    text-decoration:underline;
}

#ddlPerson
{
     width:170px;
}
</style>
<script type="text/javascript">
window.isIE = document.all ? true : false;
/***********************************************
* 为元素附加事件
* target:事件源
* type:类型，不加on
* fn: 处理函数
* useCapture:真,侦听器只在捕获阶段处理事件，而不在目标或冒泡阶段处理事件;
*            否则侦听器只在目标或冒泡阶段处理事件
************************************************/
function addEvent(target,type,fn,useCapture)
{
    if(!target) return;
    if(target.addEventListener)
    {
        //执行顺序是先加入的处理函数先执行
        addEventListener(type,fn,useCapture);
    }
    else if(target.attachEvent)
    {
        //执行顺序是后加入的处理函数先执行
        target.attachEvent("on"+type,fn);
    }
}

/***********************************************
* 为元素移除事件
* target:事件源
* type:类型，不加on
* fn: 处理函数
* useCapture:真,侦听器只在捕获阶段处理事件，而不在目标或冒泡阶段处理事件;
*            否则侦听器只在目标或冒泡阶段处理事件
************************************************/
function removeEvent(target,type,fn,useCapture)
{
    if(!target) return;
    if (target.removeEventListener)
    {
        target.removeEventListener(type,fn,useCapture);
    }
    else if (target.detachEvent)
    {
        target.detachEvent("on"+type,fn); 
    }
}

//筛选选择
function edd_ulPerson_li_click(o)
{
    var tlist = document.getElementById("ulPerson");
    if(tlist.hasAttribute("activeIndex"))
    {
        var activeIndex = parseInt(tlist.getAttribute("activeIndex"));
        if(activeIndex > -1)
        {
            tlist.childNodes[activeIndex].removeAttribute("class");
        }
    }
    var tag = parseInt(o.getAttribute("tag")),idx = parseInt(o.getAttribute("index"));
    document.getElementById("ddlPerson").options[tag].selected = true;
    o.className = "selected";
    document.getElementById("txtPerson").value = o.innerHTML;
    tlist.setAttribute("activeIndex",idx);
    tlist.style.display = "none";
    
}

//up,down按键显示可选项
function edd_txtPerson_keydown(o,e)
{
    e = e || window.event;
    var k = e.keyCode || e.which;
    var list = document.getElementById("ulPerson");
    var activeIndex = list.hasAttribute("activeIndex") ? parseInt(list.getAttribute("activeIndex")):-1;
    var total = list.hasAttribute("childCount") ? parseInt(list.getAttribute("childCount")):0;
    //向上
    if(k == 38)
    {
        if(total > 0)
        {
            if(activeIndex == -1)
            {
                activeIndex = total - 1;
            }
            else if(activeIndex == 0)
            {
                list.childNodes[activeIndex].removeAttribute("class");
                activeIndex = total - 1;
            }
            else
            {
                list.childNodes[activeIndex].removeAttribute("class");
                activeIndex--;
            }
            list.childNodes[activeIndex].className = "active";
            list.setAttribute("activeIndex",activeIndex);
            
            edd_autoscroll(list,list.childNodes[activeIndex]);
            
            if(list.style.display == "none")
            {
                edd_show_ulPerson(list);
            }
        }
        o.setAttribute("cancelFilter",1);
        return false;
    }
    else if(k == 40)
    {
        //向下
        if(total > 0)
        {
            if(activeIndex == -1)
            {
                activeIndex = 0;
            }
            else if(activeIndex == total - 1)
            {
                list.childNodes[activeIndex].removeAttribute("class");
                activeIndex = 0;
            }
            else
            {
                list.childNodes[activeIndex].removeAttribute("class");
                activeIndex++;
            }
            list.childNodes[activeIndex].className = "active";
            list.setAttribute("activeIndex",activeIndex);
            
            edd_autoscroll(list,list.childNodes[activeIndex]);
            
            if(list.style.display == "none")
            {
                edd_show_ulPerson(list);
            }
        }
        o.setAttribute("cancelFilter",1);
        return false;
    }
    else if(k == 13)
    {
        if(list.childNodes[activeIndex])
        {
            o.value = list.childNodes[activeIndex].innerHTML;
            document.getElementById("ddlPerson").options[parseInt(list.childNodes[activeIndex].getAttribute("tag"))].selected = true;
        }
        list.style.display = "none";
        o.setAttribute("cancelFilter",1);
        return false;
    }
    return true;
}

//元素不可见，自动滚动到可见的位置
function edd_autoscroll(l,i)
{
    if(i.offsetTop < l.scrollTop 
    || l.scrollTop + l.offsetHeight < i.offsetTop)
    {
        l.scrollTop = i.offsetTop;
    }
}

//筛选输入进行筛选
function edd_txtPerson_keyup(o,e)
{
    //取消筛选
    if(o.hasAttribute("cancelFilter"))
    {
        o.removeAttribute("cancelFilter");
        return false;
    }
    var tlist = document.getElementById("ulPerson");
    if(tlist)
    {
        tlist.style.display = "none";
        tlist.innerHTML = "";
        tlist.removeAttribute("activeIndex");
        tlist.removeAttribute("childCount");
        var str = o.value;
        if(str && str.length > 0)
        {
            var ops = [];
            var tstr;
            var list = document.getElementById("ddlPerson");
            if(list && list.options && list.options.length > 0)
            {
                for(var i =0;i<list.options.length;i++)
                {
                    if(list.options[i].text.indexOf(str) > -1)
                    {
                       tstr = list.options[i].text;
                       ops.push("<li tag=\""+i+"\" index=\""+ops.length+"\" οnclick=\"edd_ulPerson_li_click(this);\">"+tstr+"</li>");
                    }
                }
                
                if(ops.length > 0)
                {
                    tlist.innerHTML = ops.join("");
                    edd_show_ulPerson(tlist);
                    
                    tlist.setAttribute("activeIndex",-1);
                    tlist.setAttribute("childCount",ops.length);
                }
            }
        }
    }
}

//下拉选择后发生
function edd_ddlPerson_change(o,e)
{
    var txt = document.getElementById("txtPerson");
    txt.value = o.options[o.selectedIndex].text;
    var tlist = document.getElementById("ulPerson");
    tlist.innerHTML = "";
    tlist.removeAttribute("activeIndex");
    tlist.removeAttribute("childCount");
}

//筛选获取焦点的时候取消关闭筛选下拉
function edd_ulPerson_cancelClose(o)
{
    if(o.hasAttribute("timerID"))
    {
        window.clearTimeout(parseInt(o.getAttribute("timerID")));
    }
    
    if(document.getElementById("txtPerson").hasAttribute("timerID"))
    {
        window.clearTimeout(parseInt(document.getElementById("txtPerson").getAttribute("timerID")));
    }
}

//筛选失去焦点的时候关闭筛选下拉
function edd_ulPerson_close(o)
{
    if(o.hasAttribute("timerID"))
    {
        window.clearTimeout(parseInt(o.getAttribute("timerID")));
    }
    
    if(o.style.display != "none")
    {
        o.setAttribute("timerID",window.setTimeout(edd_close_ulPerson,500));
    }
}

//输入筛选获取焦点的时候取消关闭筛选下拉
function edd_txtPerson_cancelClose(o)
{
    if(o.hasAttribute("timerID"))
    {
        window.clearTimeout(parseInt(o.getAttribute("timerID")));
    }
    
    if(document.getElementById("ulPerson").hasAttribute("timerID"))
    {
        window.clearTimeout(parseInt(document.getElementById("ulPerson").getAttribute("timerID")));
    }
}

//输入筛选失去焦点的时候关闭筛选下拉
function edd_txtPerson_close(o)
{
    if(o.hasAttribute("timerID"))
    {
        window.clearTimeout(parseInt(o.getAttribute("timerID")));
    }
    
    if(document.getElementById("ulPerson").style.display != "none")
    {
        o.setAttribute("timerID",window.setTimeout(edd_close_ulPerson,500));
    }
}

//显示筛选列表
function edd_show_ulPerson(o)
{
   o = o || document.getElementById("ulPerson");
   o.style.display = "inline";
}

//关闭筛选列表
function edd_close_ulPerson()
{
    document.getElementById("ulPerson").style.display = "none";
    document.getElementById("ulPerson").removeAttribute("timerID");
    document.getElementById("txtPerson").removeAttribute("timerID");
}
</script>
<asp:TextBox id="txtPerson" runat="server" 
οnkeydοwn="return edd_txtPerson_keydown(this,event);"
οnkeyup="edd_txtPerson_keyup(this,event);"
οnfοcus="edd_txtPerson_cancelClose(this)"
οnblur="edd_txtPerson_close(this)"/>
<ul id="ulPerson" 
οnfοcus="edd_ulPerson_cancelClose(this)"
οnblur="edd_ulPerson_close(this)"></ul>
<asp:DropDownList ID="ddlPerson" runat="server" 
οnchange="edd_ddlPerson_change(this,event)">
</asp:DropDownList>
</div>

预览效果：