仿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>

<!--

　　function MM_reloadPage(init) { //reloads the window if Nav4 resized

　　if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {

　　document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}

　　else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

　　}

　　MM_reloadPage(true);

　　//-->

　　</script>

<!--

　　body {

　　margin-left: 0px;

　　margin-top: 0px;

　　margin-right: 0px;

　　margin-bottom: 0px;

　　}

　　body {

　　font-family: Arial, Helvetica, sans-serif;

　　font-size: 12px;

　　line-height: 150%;

　　color: #003399;

　　text-decoration: none;

　　}

　　a:link {

　　font-family: Arial, Helvetica, sans-serif;

　　font-size: 12px;

　　line-height: 150%;

　　font-weight: normal;

　　color: #003399;

　　text-decoration: none;

　　}

　　a:visited {

　　font-family: Arial, Helvetica, sans-serif;

　　font-size: 12px;

　　line-height: 150%;

　　font-weight: normal;

　　color: #003399;

　　text-decoration: none;

　　}

　　a:hover {

　　font-family: Arial, Helvetica, sans-serif;

　　font-size: 12px;

　　line-height: 150%;

　　color: #0099FF;

　　text-decoration: underline;

　　}

　　a:active {

　　font-family: Arial, Helvetica, sans-serif;

　　font-size: 12px;

　　line-height: 150%;

　　color: #0099FF;

　　text-decoration: underline;

　　}

　　-->

　　</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+")' style='cursor:pointer' 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)" onclick="showBody()">点击这里for my dear Gee_gee</a>(Moontoucher's UI manager)</td>

　　</tr>

　　</table> </div><br>

　　<br>

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

　　</body>

　　</html>

教程首页更多教程