`
sxpyrgz
  • 浏览: 72490 次
  • 性别: 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的下拉输入框，供大家参考与学习

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

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

相关推荐

    JavaFx实现百度文本框的下拉提示功能

    在JavaFX中，实现百度文本框的下拉提示...总结一下，JavaFX中的百度文本框下拉提示功能主要涉及文本监听、匹配算法、列表视图操作以及自定义组件的创建。通过这样的实现，我们可以为用户提供更加智能和友好的输入体验。

    jquery实现动态添加文本框和下拉框效果

    jquery实现动态添加文本框和下拉框效果。

    jQuery点击文本框下拉菜单城市选择代码

    本主题聚焦于"jQuery点击文本框下拉菜单城市选择代码"，这是一个常见的用户界面功能，用于提高网页表单填写的便捷性。用户在输入城市信息时，可以通过点击文本框触发一个下拉菜单，展示可选的城市列表，从而快速选择...

    VB 仿QQ单行文本框-下拉列表-按钮-日历控件最

    QQ单行文本框可能是指模仿QQ客户端的样式，具有特定的边框、字体、颜色等视觉效果，可以通过自定义控件或修改控件属性来实现。 2. **下拉列表**（VComboBox_Text.ctl）： 在VB中，下拉列表通常使用ComboBox控件...

    文本框动态下拉单，支持键盘选择struts2+ajax

    "文本框动态下拉单，支持键盘选择struts2+ajax" 是一个典型的Web应用功能，它结合了Struts2框架、Ajax技术以及一些JavaScript库来实现高效的数据检索和用户输入交互。 1. **Struts2框架**：Struts2是一个基于MVC...

    jQuery input文本框点击下拉选择代码.zip

    在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理和动画效果。本资源“jQuery input文本框点击下拉选择代码.zip”提供了一种实现输入框(input)点击后显示下拉菜单供用户选择的...

    jQuery input文本框城市下拉菜单选择代码

    本示例中，“jQuery input文本框城市下拉菜单选择代码”是关于如何使用jQuery来实现一个交互式的城市选择功能，通常用于用户在输入框中选择他们的所在城市。这种功能常见于在线表单、地址填写等场景，可以提高用户...

    winform文本框实现百度效果以及搜索记忆功能

    在Windows Forms（Winform）应用开发中，常常需要创建具有智能提示和搜索功能的文本框。这个项目就是针对这样的需求，实现了类似百度搜索框的效果，包括自动补全和搜索历史记忆功能。以下将详细讲解如何在Winform中...

    jQuery input文本框点击下拉菜单选择代码

    在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理、动画效果和Ajax交互。本文将详细讲解如何使用jQuery实现一个功能，即当用户点击input文本框时，弹出一个下拉菜单供用户选择。...

    jQuery 文本框模拟下拉列表效果

    网页代码如下： New Web Project 提交 运行后，需要刷新一下， 才可以加载jquery [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 用到的图片： ...最后的效果： 默认/光标移出时文本框的样子： ...最终效果：

    文本框下拉列表值自动提示效果

    文本框下拉列表自动提示效果,用户在输入一个或多个值会自动提示数据库里面的值 RecommResource.aspx和RecommResource.aspx.cs文件是可以动态生成JS文件,另外外部还有一个JS

    javascript 文本框下拉提示与cookie应用实例

    总结来说，这个实例展示了如何使用JavaScript和CSS创建文本框下拉提示，同时利用Cookie存储用户的选择，以实现更个性化的交互体验。在实际开发中，这样的设计可以应用于搜索框、自动补全或者任何需要提供预设选项供...

    文本框下拉自动选择功能例子autocomplete

    文本框下拉自动选择功能，通常被称为Autocomplete或者Auto-suggestion，是许多现代网页和应用程序中常见的一种交互设计。这个功能极大地提升了用户输入的效率，因为它可以在用户输入时实时显示可能的匹配项，用户只...

    Word2021文本框设置阴影效果教程.docx

    ### Word2021文本框设置阴影效果教程 在Word2021中，通过为文本框添加阴影效果，可以显著提升文档的视觉吸引力。本文将详细介绍如何在Word2021中为文本框设置阴影效果，包括阴影的样式、位置调整以及颜色选择等关键...

    下拉文本框 查询内含JS CSS代码

    在网页设计中，下拉文本框（Dropdown Box）是一种常见的用户界面元素，它允许用户从预定义的一系列选项中选择一个。在某些情况下，当选项数量庞大时，传统的下拉框可能会变得难以操作，因为用户需要滚动很长的距离...

    asp.net文本框下拉列表批量删除

    在ASP.NET开发中，"asp.net文本框下拉列表批量删除"是一个常见的需求，尤其是在处理大量数据时。这个功能允许用户通过输入关键词进行搜索，并一次性删除满足条件的多项选择。在本场景中，jQuery库被用来增强前端交互...

    js实现文本框下拉选项自动匹配

    在JavaScript开发中，"js实现文本框下拉选项自动匹配" 是一个常见的需求，尤其在构建用户友好的交互式Web应用时。这个功能允许用户在输入框中输入文本时，根据输入的内容动态过滤并显示匹配的下拉选项，极大地提高了...

    asp如何实现动态下拉菜单赋值给文本框

    本文将详细探讨ASP中如何实现动态下拉菜单赋值给文本框的两种方法，这在构建用户友好的界面时非常有用。 ### 方法一：使用JavaScript 首先介绍的是通过JavaScript来实现动态下拉菜单赋值给文本框的方式。这种方法...

    JavaScript 文本框下拉提示(自动提示)

    JavaScript 文本框下拉提示，通常被称为自动补全或自动提示功能，是许多网页和应用程序中常见的一种交互设计。这种技术允许用户在输入文本时，系统根据已输入的部分内容提供匹配建议，从而提高输入效率和用户体验。...

    Axure RP 8 带滚动条带筛选的下拉列表框 圆角文本框

    总的来说，了解如何在Axure RP 8中创建和使用带有高级特性的UI组件，如带滚动条和筛选的下拉列表框以及圆角文本框，对于提升设计质量和效率至关重要。通过熟练运用元件库，设计师可以更专注于设计本身，而非基础组件...

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