文本框带下拉效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML lang=en><HEAD> <TITLE>[email protected],</TITLE> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <SCRIPT type=text/javascript>
/** * 〖功能模块〗： 进行下拉输入 * 〖目 的〗： 进行下拦输入数据 * 〖作 者〗： rgz [email protected] * 〖创建日期〗： * 〖版 本〗： 1.00 * 〖版权信息〗： <br> * 〖更改记录〗： 更改时间、更改人、更改原因、更改内容<br> */ function DownSelect(params){ this.inputId = params.inputId||"tags1"; this.downDivId = params.downDivId||"div1"; this.downDiv = null; this.init(); this.data = []; this.backData = []; } DownSelect.prototype.onKeyDown = function(evt,self){ var event = self.handleEvent(evt); var key = event.key,ele = event.ele; this.clear(self); //down if(key == "40"){ var next = ele.nextSibling; if(next ==null){ next = ele.parentNode.getElementsByTagName("DIV")[0]; } next.focus(); next.style.background = "green"; //up }else if(key=="38"){ var next = ele.previousSibling; if(next ==null){ return ; } next.focus(); next.style.background = "green"; //回车 }else if(key=="13"){ document.getElementById(self.inputId).value=ele.innerHTML; document.getElementById(self.downDivId).style.display="none"; } } DownSelect.prototype.onClick = function(evt,self){ var event = self.handleEvent(evt); document.getElementById(self.inputId).value=event.ele.innerHTML; document.getElementById(self.downDivId).style.display="none"; } DownSelect.prototype.handleEvent = function(evt){ var event = evt || window.event; var key = event.which || event.keyCode; var ele =event.target || event.srcElement; return {key:key,ele:ele} ; } DownSelect.prototype.onMouseOver = function(evt,self){ var event = self.handleEvent(evt); this.clear(self); event.ele.style.background="green"; } DownSelect.prototype.clear = function(self){ var divs = document.getElementById(self.downDivId).getElementsByTagName("DIV"); for(var i =0 ;i<divs.length;i++){ divs[i].style.background=""; } } DownSelect.prototype.inputOnKeyDown = function(evt,self){ var event = self.handleEvent(evt); this.downDiv = document.getElementById(self.downDivId); document.getElementById(self.downDivId).style.display="block"; var obj = self.getPosition(self.inputId); self.filter(event.ele,self); if(this.data.length>0){ self.Style(this.downDiv,{left:obj.x,width:obj.width-2+"px",top:obj.y+obj.height,postion:"absolute",border:"1px solid #c1e5d8",float:"left"}); if(event.key == "40"){ this.clear(self); document.getElementById(self.downDivId).getElementsByTagName("DIV")[0].focus(); document.getElementById(self.downDivId).getElementsByTagName("DIV")[0].style.background="green"; } } } DownSelect.prototype.init = function(){ } DownSelect.prototype.Style = function(obj,styles){ if(typeof styles == "object" && obj && obj.style) { for(var temp in styles) obj.style[temp] = styles[temp]; } }; DownSelect.prototype.getPosition=function(e){ var obj = {}; if(typeof e =="string"){ e =document.getElementById(e); } var left = 0,top = 0, width = e.offsetWidth,height = e.offsetHeight; while (e.offsetParent){ left += e.offsetLeft + (e.Style?(parseInt(e.Style.borderLeftWidth)).NaN0():0); top += e.offsetTop + (e.Style?(parseInt(e.Style.borderTopWidth)).NaN0():0); e = e.offsetParent; } left += e.offsetLeft + (e.Style?(parseInt(e.Style.borderLeftWidth)).NaN0():0); top += e.offsetTop + (e.Style?(parseInt(e.Style.borderLeftWidth)).NaN0():0); return {x:left, y:top,x1:left+width,y1:top+height,width:width,height:height}; } DownSelect.prototype.setData=function(data){ this.backData = data || ["中国人","a","java","asp","cvs"]; var self = this; document.getElementById(this.inputId).onkeyup = function(evt){self.inputOnKeyDown(evt,self)}; this.downDiv = document.getElementById(this.downDivId); if(!this.downDiv){ this.downDiv = document.createElement("DIV"); this.downDiv.id = this.downDivId = this.inputId+"id"; self.Style(this.downDiv,{display:"none",background:"#ffffff",position:"absolute"}); document.body.appendChild(this.downDiv); } } DownSelect.prototype.filter=function(obj,self){ self.downDiv.style.position="absolute"; self.data = []; self.downDiv.innerHTML = ""; for(var i =0 ;i<self.backData.length;i++){ var temp = self.backData[i]; if(temp.indexOf(obj.value)!=-1 && obj.value!=""){ self.data.push(temp); } } for(var i =0 ;i<self.data.length;i++){ var temp = document.createElement("DIV"); self.Style(temp,{float:"left",width:"100%",borderBottom:"1px dotted #b8c9ed",overflow:"hidden"}); self.downDiv.appendChild(temp); temp.onkeydown = function(evt){self.onKeyDown(evt,self)}; temp.onmouseover = function(evt){self.onMouseOver(evt,self)}; temp.onclick = function(evt){self.onClick(evt,self)}; temp.style.borderBottom="1px solid red"; temp.style.cursor = "hand"; temp.setAttribute("tabindex","0"); temp.innerHTML = self.data[i]; } if(self.data.length<=0 || obj.value=="") self.downDiv.style.display="none"; } function init(){ var obj = {}; obj.inputId= "tags1"; var down = new DownSelect(obj); down.setData(); // down1.setData(); } </SCRIPT> </HEAD> <BODY onload="init()"> <INPUT id=tags1 > </BODY> </HTML>
最近，由于需要，自个写了一个下拉输入框，可以支持IE，FIRFOX的下拉输入框，供大家参考与学习