<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+"\" onclick=\"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" 
onkeydown="return edd_txtPerson_keydown(this,event);"
onkeyup="edd_txtPerson_keyup(this,event);"
onfocus="edd_txtPerson_cancelClose(this)"
onblur="edd_txtPerson_close(this)"/>
<ul id="ulPerson" 
onfocus="edd_ulPerson_cancelClose(this)"
onblur="edd_ulPerson_close(this)"></ul>
<asp:DropDownList ID="ddlPerson" runat="server" 
onchange="edd_ddlPerson_change(this,event)">
</asp:DropDownList>
</div>