繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 仿163填写邮件地址自动显示下拉（无优化）
- Javascript
- javascript实例教程(19) 使用HoTMetal(5)
- javascript实例教程(19) 使用HoTMetal(6)
- javascript实例教程(19) 使用HoTMetal(7)
- javascript实例教程(20) OLE Automation(1)
- javascript实例教程(20) OLE Automation(2)
- javascript实例教程(20) OLE Automation(3)
- javascript实例教程(20) OLE Automation(4)
- javascript实例教程(20) OLE Automation(5)
- javascript实例教程(20) OLE Automation(6)
- javascript实例教程(20) OLE Automation(7)
- 用javascript实现利用FLASH嵌入声音
- javascript版的日期输入控件(6)
- javascript设计网页中的下拉菜单
- javascript设计漫天雪花
- javascript制作浮动的工具条
- javascript制作闪烁的边框
- javascript模拟游戏中的弹出菜单效果
- 在IE中使用javascript
- 利用javascript制作简单动画
- 首页地址添加到收藏夹(javascript)
Javascript 中的 仿163填写邮件地址自动显示下拉（无优化）
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 173 ::
收藏到网摘: n/a
本框内填个1，这些值都写在隐藏域了。代码里可以看到,用户输入包含在里面的时候,可以按ENTER键选中.
复制代码 代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>20060427simulate 163</title>
<script language="JavaScript" type="text/JavaScript">
<!--
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>
<style type="text/css">
<!--
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>
<script language="javascript">
/*
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>
<div id="opp"></div>
<div id="Layer1" style="position:absolute; background-color:#000000; left:0px; top:0px; width:100%; height:650px; filter: alpha(opacity=20); z-index:1; visibility: hidden;"></div>
<div id="Layer2" style="position:absolute; left:0px; top:150px; width:100%; height:200px; z-index:2; visibility: hidden;">
<table align="center" width="50%" height="70" cellpadding="0" bgcolor="#FFFFFF" cellspacing="0" >
<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>
<br>
<br>
<br>
<input name="drop" type="text" id="drop" onKeyup="droplist();changeTable()" >
仿163输入邮件地址自动显示下拉列表（献给最亲爱的gee_gee）
<div id="p" style="height:100px; width:170px; overflow:auto; border-width:1px; border-color:#000000 "></div>
<input type="hidden" id="hv" name="hv" value="123">
<input type="hidden" id="hv" name="hv" value="uio">
<input type="hidden" id="hv" name="hv" value="lkjl">
<input type="hidden" id="hv" name="hv" value="9876">
<input type="hidden" id="hv" name="hv" value="123467">
<input type="hidden" id="hv" name="hv" value="fghj">
<input type="hidden" id="hv" name="hv" value="yutf78">
<input type="hidden" id="hv" name="hv" value="王旺">
<input type="hidden" id="hv" name="hv" value="cuiliyi">
<input type="hidden" id="hv" name="hv" value="呵呵">
<input type="hidden" id="hv" name="hv" value="王子复仇记">
<input type="hidden" id="hv" name="hv" value="certerly">
<input type="hidden" id="hv" name="hv" value="123">
<input type="hidden" id="hv" name="hv" value="uio">
</body>
</html>
评论 (0) All
