2010-02-06 10:58:44| 分类: javascript | 标签: |举报 |字号大中小 订阅
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javas
var listArr=new Array("dexter@farstone.com","xdream@126.com","dexter@farstone.com.cn","do@163.com","ddddd@dd.com.cn","51js.com","你好吗?","dexterfar@hotmail.com","ddddddddddddddddddd")
var currListArr=new Array();
var currFocusIndex=-1;
function getRstList(inputStr)
{
//inputStr
var outArr=new Array()
for(i=0;i<listArr.length;i++)
{
if (listArr[i].substr(0,inputStr.length)==inputStr)
{
outArr.push(listArr[i]);
}
}
return outArr
}
function setDownList(sStr)
{
var rstArr=getRstList(sStr)
var mailObj;
var obj1;
var list;
mailObj=document.getElementById("mailAddr");
list=document.getElementById("addr_list");
while (list.hasChildNodes())///移除当前列表
{
list.removeChild(list.lastChild);
}
while(currListArr.length>0)//移除堆栈里的内容
{
currListArr.pop();
}
if (sStr=="" || rstArr.length==0)//不反映的情况。
{
list.style.display="none";
return false;
}
else if(rstArr.length==1 && rstArr[0]==document.getElementById("mailAddr").value)
{
return false;
}
for (i=0;i<rstArr.length;i++)
{
obj1=document.createElement("li");
obj1.innerHTML=rstArr[i]
//obj1.style="background-color:#00CCFF; list-style-position:outside; list-style-type:none;"
obj1.style.backgroundColor="#ffffff";
obj1.style.listStylePosition="outside";
obj1.style.listStyleType="none";
obj1.style.fontSize="12px";
obj1.style.fontFamily="Verdana, Arial, Helvetica, sans-serif"
obj1.style.cursor="pointer";
obj1.style.width=getCurrentP(mailObj,"width")+"px";
obj1.style.lineHeight="20px";
list.appendChild(obj1);
currListArr.push(obj1);//加入当前列表堆栈
obj1.on
{
try
{
currListArr[currFocusIndex].style.backgroundColor="#ffffff";
currListArr[currFocusIndex].style.color="#000000";
}catch(e)
{
}
currFocusIndex=getThisIndexInStack(this)
this.style.backgroundColor="#153073"
this.style.color="#ffffff"
}
obj1.on
{
this.style.backgroundColor="#ffffff";
this.style.color="#000000";
}
obj1.on
{
currFocusIndex=-1;
var list=document.getElementById("mailAddr");
list.value=this.innerHTML;
document.getElementById("addr_list").style.display="none";
}
}
//alert(getCurrentP(mailObj,"y"))//tagName////clientHeight
list.style.left=getCurrentP(mailObj,"x")+'px'
list.style.top=(getCurrentP(mailObj,"y")+mailObj.clientHeight+3)+"px"
list.style.display="block";
}
function getCurrentP(htmlObj,dre)
{
var tmpObj;
var nums=0;
tmpObj=htmlObj;
switch(dre)
{
case "x":
{
while (true)
{
if (tmpObj==null) break;
if (!isNaN(tmpObj.offsetLeft) && tmpObj.tagName!="FORM" && tmpObj.tagName!="P")
{
nums+=parseInt(tmpObj.offsetLeft);
//alert (tmpObj.tagName+tmpObj.offsetLeft)
}
tmpObj=tmpObj.parentNode
}
return nums;
}
case "y":
{
while (true)
{
if (tmpObj==null) break;
if (!isNaN(tmpObj.offsetTop) && tmpObj.tagName!="FORM" && tmpObj.tagName!="P")
{
nums+=parseInt(tmpObj.offsetTop);
//alert (tmpObj.tagName+"--"+tmpObj.offsetTop)
}
tmpObj=tmpObj.parentNode
}
return nums;
}
case "width":
{
return tmpObj.offsetWidth;
}
}
}
function clearList()
{
currFocusIndex=-1;
if(document.getElementById("addr_list").style.display!="none")
{
document.getElementById("addr_list").style.display="none";
}
}
function upDownKey(keycode,inputObj)
{
if (keycode==40)
{
//inputObj.blur();
currFocusIndex++;
if (currListArr.length-1<currFocusIndex)
{
currFocusIndex=currListArr.length-1;
}
try{
currListArr[currFocusIndex].style.backgroundColor="#153073";
currListArr[currFocusIndex].style.color="#ffffff"}
catch(e){}
}
if (keycode==38)
{
//inputObj.blur();
currFocusIndex--;
if (currListArr.length-1<currFocusIndex)
{
currFocusIndex=currListArr.length-1;
}
if (currFocusIndex<0)
{
document.getElementById("addr_list").style.display="none";
currFocusIndex=-1;
return;
}
currListArr[currFocusIndex].style.backgroundColor="#153073";
currListArr[currFocusIndex].style.color="#ffffff"
//alert (currFocusIndex)
}
}
function getThisIndexInStack(seekObj)
{
for (i=0;i<currListArr.length;i++)
{
if (seekObj==currListArr[i])
{
return i;
}
}
return -1;
}
document.on
{
if (event.keyCode==13 && document.getElementById("addr_list").style.display!="none")
{
//
//alert (currListArr[currFocusIndex].innerHTML)
document.getElementById("mailAddr").value=currListArr[currFocusIndex].innerHTML;
document.getElementById("addr_list").style.display="none"
event.returnValue=false;
currFocusIndex=-1;
}
}
</script>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
<body on
<br><br><br>
<form id="form1" method="post" act
<table width="664" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="220" align="center"> </td>
<td width="444" align="center"><input name="textfield" type="text" id="mailAddr" on
<input type="submit" name="Submit" value="提交"></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
</form>
<br>
<br>
<br>
<br>
<div id="addr_list" style="background-color:#999999; position:absolute; top:500px; left:0px; border:1px solid #111111; display:none; background-color:#FFFFFF;"></div>
</body>
</html>
评论