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+"\" 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>