自己写的模仿google动态提示下拉

这里没写后台方法只是用静态数据模拟后台动态查询数据

下面是html代码

 

<! 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=UTF-8"   />  
< title > 模仿google提示下拉htm </ title >  
< style  type ="text/css" > ...  
<!-- 
.mouseover {...}{ 
color: #FFFFFF; 
background-color: #316AC5; 
cursor: default; 
} 
.mouseout {...}{ 
cursor: default; 
} 
--> 
</ style >
< SCRIPT  src ="./MySelect.js" ></ SCRIPT >
< script  language ="javascript" > ...

//增加字符串的trim方法
String.prototype.trim=function()...{ 
 return this.replace(/(^s*)|(s*$)/g, ""); 
}

String.prototype.lTrim=function()...{ 
 return this.replace(/(^s*)/g, ""); 
}

String.prototype.rTrim=function()...{ 
 return this.replace(/(s*$)/g, ""); 
}

String.prototype.replaceAll=function(s1,s2)...{    
 return this.replace(new RegExp(s1,"gm"),s2);    
}

var mySelect;//下拉自动提示对象
var path;//存放文件路径的变量

function getPath(event)...{
 var e=event.keyCode?event.keyCode:event.which;
 if(e==38||e==40||e==13)...{
  return false;
 }
 var protoValue=document.getElementById("path").value;
 if(protoValue.trim()=="")...{
  mySelect.s=false;
  mySelect.hide();
  return false;
 }
 if(protoValue.replaceAll("/s+"," ")==mySelect.protoValue.replaceAll("/s+"," "))...{
  return false;
 }
 if(mySelect.s)...{
  return false;
 }
 mySelect.protoValue=protoValue;
 var cutIn=protoValue.lastIndexOf("/")+1;
 path=protoValue.substring(0,cutIn);
 //下面应该是提交后台的操作就不写了这里用一些静态数据来充当后台查询出来的数据
 //注意前台并不作匹配，所以当你输入“/1”后不会匹配出“/1758”来
 //在实际使用时当你输入一个字后他就会到后台查询，后台的优化看你了^_^我做的后台还可以
 //当然也要屏蔽一些情况不要让所有但按键都出发查询操作！！！
 var returnArray=[["/1758","前台"],["/98463","文档维护"],["/src","java文档目录"]];
 mySelect.show(returnArray);
}


function windowOnload()...{
 mySelect=new MySelect(document.getElementById("path"));
}
</ script >
</ head >

< body  onload ="windowOnload();"  onclick ="mySelect.hide();" >
  < div  height ="100%"  width ="100%" >
  文档地址
   < input  size ="40"  id ="path"  onkeyup ="getPath(event);"  onkeydown ="mySelect.onkeypress(event);"   />
  </ div >
</ body >
</ html >

 

下面是js代码(MySelect.js)

 

// MySelect.js 
// create by Gary at 2008-3-14 14:35:23 
// show you a selfly select box 
// Object host 宿主控件 
// Function callBack 处理选中结果的方法 
function  MySelect(host,callBack) ... { 
if(!host)...{ 
  return null; 
} 
var div=document.createElement("div"); 
var table=document.createElement("table"); 
var tbody=document.createElement("tbody"); 
var tfoot=document.createElement("tfoot"); 
var tr=document.createElement("tr"); 
var td=document.createElement("td"); 
var a=document.createElement("a"); 
­
table.width="100%"; 
table.cellPadding=0; 
table.cellSpacing=0; 
td.colSpan="2"; 
td.align="right"; 
­
a.href="#"; 
a.innerHTML="关闭"; 
­
with(div.style)...{ 
  width=host.offsetWidth-2+"px"; 
  backgroundColor="#FFFFFF"; 
  display="none"; 
  overflow="visible"; 
  position="absolute"; 
  zIndex="999999999"; 
  borderWidth="1px"; 
  bordercolor="#000000"; 
  borderStyle="solid"; 
} 
­
td.appendChild(a); 
tr.appendChild(td); 
tfoot.appendChild(tr); 
table.appendChild(tbody); 
table.appendChild(tfoot); 
div.appendChild(table); 
document.body.appendChild(div); 
­
this.host=host; 
this.callBack=callBack; 
this.protoValue=host.value; 
this.pos=getAbsolutePos(host); 
this.div=div; 
this.tbody=tbody; 
this.closeButton=a; 
this.c=-1; 
this.data; 
this.s=false;//是否点击过关闭按钮 
}  
MySelect.prototype.show = function (data) ... { 
if(data.length==0)...{ 
  return false; 
} 
var me=this; 
me.data=data; 
me.c=-1; 
me.closeButton.onclick=function()...{me.host.focus();me.s=true;me.hide();}; 
var tmp=document.createDocumentFragment(); 
­
for(var i=0;i<data.length;i++)...{ 
  var tr=document.createElement("tr"); 
  var td=document.createElement("td"); 
  td.appendChild(document.createTextNode(data[i][0])); 
  tr.appendChild(td); 
  td=document.createElement("td"); 
  td.appendChild(document.createTextNode(data[i][1])); 
  td.style.color="#2edb15"; 
  td.align="right"; 
  tr.appendChild(td); 
  //tr.title="asdfasdfasdf"; 
  me.regRowClick(i,tr); 
  me.regMouseover(i,tr); 
  tr.onmouseout=function()...{this.className="mouseout"}; 
  tmp.appendChild(tr); 
} 
­
removeChildrenFromNode(me.tbody); 
me.tbody.appendChild(tmp); 
me.div.style.left=me.pos.x+"px"; 
me.div.style.top=me.pos.y+me.host.offsetHeight+"px"; 
me.div.style.display=""; 
} ; 
MySelect.prototype.regMouseover = function (rowNo,element) ... { 
var me=this; 
element.onmouseover=function()...{ 
  if(me.c!=-1)...{ 
   me.tbody.rows[me.c].className="mouseout"; 
  } 
  this.className="mouseover"; 
  me.c=rowNo; 
}; 
} ; 
// 注册行单击事件 
MySelect.prototype.regRowClick = function (rowNo,element) ... { 
var me=this; 
element.onclick=function()...{ 
  me.host.focus(); 
  me.host.value=me.data[rowNo][0]; 
  me.hide(); 
  if(typeof(me.callBack)=="function")...{ 
   me.callBack(me.host.value); 
  } 
}; 
} ; 
// 注册文本框的键盘事件 
MySelect.prototype.onkeypress = function (event) ... { 
var me=this; 
if(!me.data)...{ 
  return false; 
} 
var e=event.keyCode?event.keyCode:event.which; 
var l=me.tbody.rows.length; 
switch(e)...{ 
  case 40:...{ 
   if(me.c>=l-1)...{ 
    me.tbody.rows[me.c].className="mouseout"; 
    me.c=-1 
    me.host.value=me.protoValue; 
   }else if(me.c==-1)...{ 
    me.c++; 
    me.tbody.rows[me.c].className="mouseover"; 
    me.host.value=me.data[me.c][0]; 
   }else...{ 
    me.tbody.rows[me.c].className="mouseout"; 
    me.c++; 
    me.tbody.rows[me.c].className="mouseover"; 
    me.host.value=me.data[me.c][0]; 
   } 
  };break; 
  case 38:...{ 
   if(me.c==0)...{ 
    me.tbody.rows[me.c].className="mouseout"; 
    me.c=-1; 
    me.host.value=me.protoValue; 
   }else if(me.c==-1)...{ 
    me.c=l-1; 
    me.tbody.rows[me.c].className="mouseover"; 
    me.host.value=me.data[me.c][0]; 
   }else...{ 
    me.tbody.rows[me.c].className="mouseout"; 
    me.c--; 
    me.tbody.rows[me.c].className="mouseover"; 
    me.host.value=me.data[me.c][0]; 
   } 
  };break; 
  case 13:...{ 
   me.hide(); 
   if(typeof(me.search)=="function")...{ 
    me.callBack(me.host.value); 
   } 
  };break; 
} 
} ; 
MySelect.prototype.hide = function () ... { 
this.div.style.display="none"; 
this.data=null; 
this.protoValue=""; 
} ; 
// 获得控件位置 
function  getAbsolutePos(e) ... { 
var pos=...{x:0,y:0}; 
pos.x=e.offsetLeft; 
pos.y=e.offsetTop; 
while(e=e.offsetParent)...{ 
  pos.x+=e.offsetLeft; 
  pos.y+=e.offsetTop; 
} 
­
return pos; 
}  
function  removeChildrenFromNode(node) ... { 
if(node==undefined||node==null)...{ 
  return; 
} 
var len = node.childNodes.length; 
while (node.hasChildNodes())...{ 
  node.removeChild(node.firstChild); 
} 
}