仿163填写邮件地址自动显示下拉（无优化）
更新时间：2008年11月05日 00:31:03 作者：
本框内填个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>
相关文章
这篇文章主要介绍了微信小程序条件、模板、文件引用,结合实例形式分析了微信小程序if条件判断、模板调用、wxss文件引用等相关操作技巧,需要的朋友可以参考下2020-06-06
这篇文章主要介绍了小程序退出页面时清除定时器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
表格翻页的实现方式有很多，下面以js为例为大家详细介绍下表格翻页效果的具体实现，感兴趣的朋友可不要错过2013-10-10
来自启点的js,主要包括字符串的trim,cookies设置等2008-04-04
第一届 web rebuild 北京会有个前淘宝前端开发工程师阿当分享的 PPT 在公司团队内部有同事下载的分享，然后看了。发现了有些技术理念的问题：2010-01-01
JavaScript中的事件循环机制是一种异步处理机制，通过维护事件队列和消息队列，实现任务的分发和执行。事件循环机制由主线程和任务队列构成，主线程运行完当前任务后会检查任务队列中是否有待执行的任务，如有则执行，否则等待2023-04-04
随着以Firefox为代表的第三方浏览器的兴起，我们做的网站也不能再JUST IE了，如果把原来的一些javascript代码放到IE以外的浏览器的话，往往都不能正常运行或出错，所以这里介绍一下怎么改进我们的JS，让它能更加规范，更加具有兼容性。2008-09-09
导致这个问题产生的原因，一般是因为js（一个比较复杂的js）写在body里面，在body元素加载完之前调用出现问题。显然，解决该问题的方法就是将这一段js放在body元素解析完毕之后。2010-11-11
在IE上直接编辑网页内容2009-04-04
这篇文章主要为大家详细介绍了javascript实现手动点赞效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-04-04
最新评论