仿163填写邮件地址自动显示下拉（无优化）

复制代码代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>20060427simulate 163</title>

</script>

</style>

</head>

author：moonboy

本例中采用onKeyUp事件方可将录入的数据取到。在使用onKeyDown,onKeyPress事件时只是在录入第二个数据时才能取到第一个数据（i don't konw why）。

//var ns = String.fromCharCode(event.keyCode);

function droplist(){

var np= event.keyCode;

if(np==38||np==40){

}

var textv = document.getElementById("drop").value; //取得文本框内的值

textv=textv.toLowerCase(); //全部转成小写

var user = new Array();//初始化数组用来存储页面列表值的集合

var sortUser = new Array();//排序后的数组

var resultuser = new Array();//输出到前台的数组

var vv = document.getElementsByName("hv");//页面的值

var vvl= vv.length;//页面值的数组长度

//付值将从页面取到的集合放入user数组

for(var i=0;i<vvl;i++){

user[i]=vv[i].value;

}

sortUser = user.sort();//对数组排序

var rs =new Array();//初始化符合查询条件的数组

var temp;

var c=0;//符合条件的数组计数

for(var j=0;j<vvl;j++){

temp=queryWord(textv,sortUser[j]);//调用queryWord函数，计算出符合条件的值

if(temp==""){

continue;

}else{

//temp=getSelect(textv,temp);

rs[c]="<tr id='tv' name='tv' bgcolor='#eeeeee'><td id='al"+c+"' onclick='onV("+c+")' onmouseover='alterBg("+c+",0)' onmouseout='alterBg("+c+",1)'>"+getSelect(textv,temp)+"</td></tr>";

c++;

}

resultuser=rs.join("");//将书组数据分隔符设为换行符

if(textv.length==0){

resultuser="";

}

document.getElementById("p").innerHTML="<table width='150px' cellpadding='0' bgcolor='#FFFFFF' cellspacing='0'>"+resultuser+"</table>";//将数据打印到指定区域

}

function getSelect(obj,objtext){

var ol= obj.length;

var res;

obj=objtext.substring(0,ol);

res="<b>"+obj+"</b>"+objtext.substring(ol,objtext.length);

return res;

}

function alterBg(j,i){//改变下拉列表鼠标事件颜色

var o = document.getElementById('al'+j);

if(i==0)

o.style.backgroundColor ="#FFFFEE";

else if(i==1)

o.style.backgroundColor ="#eeeeee";

}

function onV(j){//取得下拉列表点击值

var o = document.getElementById('al'+j).innerHTML;

o=o.replace("<B>","");

o=o.replace("</B>","");

document.getElementById('drop').value=o;

}

function queryWord(para,str){//该函数为根据条件查询的结果

var r;

r=str.search(para);

if(r==0){

return str;

}else{

return "";

}

function Search(textv,str){//测试用函数在本例中不使用

//var textv = document.getElementById("drop").value;

var r,result; // 声明变量。

r = str.search(textv); // 查找字符串。

str=str.slice(r,-1);

document.getElementById("p").innerHTML=str.substring(0,str.indexOf(" "));

result=str.substring(0,str.indexOf(""));

return result;

// 返回 Boolean 结果。

}

var i=0;

var k;

function changeTable(){

var selectLength;

selectLength=document.getElementsByName("tv").length;

document.getElementById("opp").innerHTML=selectLength;

var keyvalue=event.keyCode;

if(selectLength>0){

if(keyvalue==40){

k=i;

i++;

}

else if(keyvalue==38){

k=i;

i--

};

if(i<0){

i=selectLength-1;

}else if(i>selectLength-1){

i=0;

}

var m = "al"+i;

var n ="al"+k;

if(selectLength==1){

var p = document.getElementById(m);

p.style.backgroundColor="#ffffee";

}else{

if(i>=0 && i<selectLength){

var p = document.getElementById(m);

p.style.backgroundColor="#ffffee";

}

if(k>=0 && k<selectLength){

var h = document.getElementById(n);

h.style.backgroundColor="#eeeeee";

}

if(keyvalue==13){

onV(i);

}

function loadDiv(){

div1.style.visibility="show";

div2.style.visibility="show";

}

function showBody(){

var div1 = document.getElementById('Layer1');

var div2 = document.getElementById('Layer2');

div1.style.visibility="hidden";

div2.style.visibility="hidden";

}

</script>

<body>

<tr>

<td align="center"><a href="javascript:void(0)">点击这里for my dear Gee_gee</a>(Moontoucher's UI manager)</td>

</tr>

</table> </div><br>

<br>

仿163输入邮件地址自动显示下拉列表（献给最亲爱的gee_gee）

</body>

</html>