带下拉框的输入框.htm

=== === === === JavaScript经典源代码收集

<xmp>
　　我想做一个这样的输入框：它有一个下拉的可选列表，列表内容是已知的可能会输入文字；
在输入一个字或词后它会自动调整顺序，把前面几个字符匹配的选项移到上面来，如果没有匹配
的就不管你，让你自个儿输入。（当然，列表里已有的也可以用鼠标点击输入可用键盘选中输入）
　　其实说半天也就是象 IE 的地址输入框啦！
</xmp>
<br>
<input onkeyup="showtips();if(event.keyCode==27)c();" id=txt onkeydown='enterTips()'>(eg. ShanDong)<br>
<select id=sel style='display:none' onclick=rv() onkeydown='if(event.keyCode==13)rv()'></select>
<script>
var msg = new Array("Beijing","Tianjing","Shanghai","Guangdong","ShanDong","Shanxi","Hunan","Hubei");
var msg2=new Array("北京","天津","上海","广东","山东","陕西","湖南","湖北");

function showtips(){
eo=event.srcElement;
sel.length=0;
var len=msg.length;
var re=new RegExp("^"+eo.value,"i")
var j=0
for(i=0;i<len;i++) if(re.test(msg[i])==true){ sel.style.display='';sel.add(new Option(msg[i],msg2[i]));j++}
sel.size = (j>1)?j:2;
}

function enterTips(){
e=event.keyCode;
if(sel.style.display!='none'){
if(e==13) event.srcElement.value=sel.value,sel.style.display='none';
if(e==40) sel.focus();
}
}
function rv(){
txt.value=sel.value;
c()
}
function c(){
sel.style.display='none';
txt.focus()
}
document.onclick=function(){
c()
}
</script>