`
sxpyrgz
  • 浏览: 70828 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

文本框带下拉效果

prototypeIEASPCVSJavaScript 
阅读更多 
<!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>PYRGZ@163.COM,</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<SCRIPT type=text/javascript>
/**
 * 〖功能模块〗： 进行下拉输入
 * 〖目　　的〗： 进行下拦输入数据
 * 〖作　　者〗： rgz PYRGZ@163.COM
 * 〖创建日期〗： 
 * 〖版　　本〗： 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的下拉输入框，供大家参考与学习

分享到：
| 网址大全
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics