当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 仿163填写邮件地址自动显示下拉（无优化）

Javascript
jquery 弹出层实现代码
jQuery 扩展对input的一些操作方法
扩展jQuery 键盘事件的几个基本方法
Iframe 自适应高度并实时监控高度变化的js代码
CCPry JS类库 代码
jquery text()要注意啦
json 入门基础教程 推荐
json 实例详细说明教程
JavaScript中的JSON 中文版翻译
javascript GUID生成器实现代码
DOM 脚本编程中的兄弟节点
JavaScript Sort 表格排序
提高网站性能之 如何对待JavaScript
js 函数的执行环境和作用域链的深入解析
键盘 keycode的值 javascript时触发事件时很有用的要素
cnblogs csdn 代码运行框实现代码
简单实用的HTML到UBB转换脚本工具实现说明
Javascript结合css实现网页换肤功能
JQuery 网站换肤功能实现代码
JS OOP包机制,类创建的方法定义

No. « 269 270 271 272 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-12   浏览: 101 ::
收藏到网摘: 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>