仿163填寫郵件地址自動顯示下拉（無優(yōu)化）
更新時間：2008年11月05日 00:31:03 作者：
本框內(nèi)填個1，這些值都寫在隱藏域了。代碼里可以看到,用戶輸入包含在里面的時候,可以按ENTER鍵選中.
復(fù)制代碼 代碼如下:
<!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事件方可將錄入的數(shù)據(jù)取到。在使用onKeyDown,onKeyPress事件時只是在錄入第二個數(shù)據(jù)時才能取到第一個數(shù)據(jù)（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; //取得文本框內(nèi)的值
textv=textv.toLowerCase(); //全部轉(zhuǎn)成小寫
var user = new Array();//初始化數(shù)組用來存儲頁面列表值的集合
var sortUser = new Array();//排序后的數(shù)組
var resultuser = new Array();//輸出到前臺的數(shù)組
var vv = document.getElementsByName("hv");//頁面的值
var vvl= vv.length;//頁面值的數(shù)組長度
//付值將從頁面取到的集合放入user數(shù)組
for(var i=0;i<vvl;i++){
user[i]=vv[i].value;
}
sortUser = user.sort();//對數(shù)組排序
var rs =new Array();//初始化符合查詢條件的數(shù)組
var temp;
var c=0;//符合條件的數(shù)組計數(shù)
for(var j=0;j<vvl;j++){
temp=queryWord(textv,sortUser[j]);//調(diào)用queryWord函數(shù)，計算出符合條件的值
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("");//將書組數(shù)據(jù)分隔符設(shè)為換行符
if(textv.length==0){
resultuser="";
}
document.getElementById("p").innerHTML="<table width='150px' cellpadding='0' bgcolor='#FFFFFF' cellspacing='0'>"+resultuser+"</table>";//將數(shù)據(jù)打印到指定區(qū)域
}
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){//改變下拉列表鼠標(biāo)事件顏色
var o = document.getElementById('al'+j);
if(i==0)
o.style.backgroundColor ="#FFFFEE";
else if(i==1)
o.style.backgroundColor ="#eeeeee";
}
function onV(j){//取得下拉列表點(diǎn)擊值
var o = document.getElementById('al'+j).innerHTML;
o=o.replace("<B>","");
o=o.replace("</B>","");
document.getElementById('drop').value=o;
}
function queryWord(para,str){//該函數(shù)為根據(jù)條件查詢的結(jié)果
var r;
r=str.search(para);
if(r==0){
return str;
}else{
return "";
}
}
function Search(textv,str){//測試用函數(shù)在本例中不使用
//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 結(jié)果。
}
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()">點(diǎn)擊這里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輸入郵件地址自動顯示下拉列表（獻(xiàn)給最親愛的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="王子復(fù)仇記">
<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>
相關(guān)文章
跟我學(xué)習(xí)javascript的最新標(biāo)準(zhǔn)ES6
跟我學(xué)習(xí)javascript的最新標(biāo)準(zhǔn)ECMAScript 6，ES6（ECMAScript 6）是即將到來的新版本JavaScript語言的標(biāo)準(zhǔn)，代號harmony，感興趣的小伙伴們可以參考一下2015-11-11
使用JS在瀏覽器中判斷當(dāng)前網(wǎng)絡(luò)連接狀態(tài)的幾種方法
本篇文章主要介紹了使用JS在瀏覽器中判斷當(dāng)前網(wǎng)絡(luò)狀態(tài)的幾種方法，非常具有實用價值，需要的朋友可以參考下2017-05-05
這篇文章主要為大家詳細(xì)介紹了原生js canvas實現(xiàn)簡單貪吃蛇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
Javascript 拖拽的一些高級的應(yīng)用(逐行分析代碼，讓你輕松了拖拽的原理)
這篇文章主要介紹了Javascript 拖拽的一些高級的應(yīng)用(逐行分析代碼，讓你輕松了拖拽的原理),需要的朋友可以參考下2015-01-01
本文主要介紹了幾種響應(yīng)式文字的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-05-05
uni-app是一個使用Vue.js開發(fā)跨平臺應(yīng)用的前端框架,下面這篇文章主要給大家介紹了關(guān)于UniApp開發(fā)H5接入微信登錄的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
JavaScript實現(xiàn)選項卡功能(面向過程與面向?qū)ο?
本文主要介紹了JavaScript實現(xiàn)選項卡功能(面向過程與面向?qū)ο?，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
JavaScript?為我們提供了很多操作符，用于操作表達(dá)式。下面就來盤點(diǎn)一下?JavaScript?中那些強(qiáng)大的操作符，感興趣的小伙伴可以了解一下2022-09-09
這篇文章主要給大家介紹了關(guān)于Javascript中click與blur事件順序的相關(guān)資料，文中介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Javascript中的click與blur事件具有一定的參考學(xué)習(xí)價值，需要的朋友可以下面來一起看看吧。2017-04-04
兩個函數(shù)相互調(diào)用如何防止死循環(huán)
這篇文章主要介紹了兩個函數(shù)相互調(diào)用如何防止死循環(huán)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03