页面版文本框智能提示代码,Asp.Net代码库,德仔网

代码语言
代码分类
【Asp.Net】页面版文本框智能提示
作者:rock870210 / 发布于2014/6/26/ 1104
设置好相应的参数即可，同时修复了在IE6下div无法遮盖下拉列表的问题，（IE6下无论如何设置select的z-index或div的z-index属性均无济于事），关于这个就是利用了一个iframe，将其盖在div要显示的位置，然后div再放在iframe上方即可。即使下方有select元素，也没关系了

	<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AutoTemple.aspx.cs" Inherits="AutoTemple" %>

	<!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 runat="server">
	 <title>无标题页</title>
	 <mce:style type="text/css"><!--
	 #coverddl{
	position:absolute;
	z-index:2;
	width:expression(this.nextSibling.offsetWidth);
	height:expression(this.nextSibling.offsetHeight);
	top:expression(this.nextSibling.offsetTop);
	left:expression(this.nextSibling.offsetLeft);
	}
	
	--></mce:style><style type="text/css" mce_bogus="1"> #coverddl{
	position:absolute;
	z-index:2;
	width:expression(this.nextSibling.offsetWidth);
	height:expression(this.nextSibling.offsetHeight);
	top:expression(this.nextSibling.offsetTop);
	left:expression(this.nextSibling.offsetLeft);
	}
	 </style>
	 <mce:script type="text/javascript" language="javascript"><!--
	 var currentIndex=-1;//保存提示框中选择的索引
	 var sumSearchCount=0;//保存提示框中数据数量
	 var tempValue="";//保存当前输入的要搜索的内容
	 var objTxt=null;//保存文本框对象
	 var top=0;//提示框的top
	 var left=0;//提示框的left
	 var width=0;//提示框的width
	 var values = null;//保存下拉列表的值
	 var texts = null;//保存下拉列表的显示内容
	 var tempDiv= null;//保存提示框中索引对应的values索引
	 var ddlName="";//获取到的下拉列表ID
	 var getDDLName = "";//服务器端下拉列表ID
	 var fontSize=12;//智能提示内容字体
	 var paddingBottom = 2;//智能提示内容下边缘大小
	 var backGroundColor = "#3366CC";//智能提示内容背景色
	 //获取下拉列表ID
	 function GetDDLID()
	 {
	 var ddls = document.getElementsByTagName("select");
	 for(var i=0;i<ddls.length;i++)
	 {
	 if(ddls[i].id.indexOf(getDDLName)!=-1)
	 {
	 ddlName=ddls[i].id;
	 break;
	 }
	 }
	 }
	
	 //获取下拉列表的值和显示内容
	 function getSelectValues(){
	 GetDDLID();
	 values = new Array();
	 texts = new Array();
	 tempDiv=new Array();
	 ddlvalue = document.getElementById(ddlName);
	 for(var i=0;i<ddlvalue.length;i++){
	 values[i]=ddlvalue.options[i].value;
	 texts[i]=ddlvalue.options[i].text;
	 }
	 }
	
	 var oInterval = "";//保存自动计时对象
	 function fnStartInterval(txt_id,ddlOldName){
	 getDDLName=ddlOldName;
	 getSelectValues();
	 objTxt=txt_id;//获取输入文本框对象
	 top = getLength("offsetTop",txt_id.id)+objTxt.offsetHeight;
	 left= getLength("offsetLeft",txt_id.id);
	 width=objTxt.offsetWidth-2;
	 oInterval = window.setInterval("beginSearch()",2000);//启用计时
	 }
	
	 //获取对应属性的长度
	 function getLength(attribute,id)
	 {
	 var offset = 0;
	 var item = document.getElementById(id);
	 while (item)
	 {
	 offset += item[attribute];
	 item = item.offsetParent;
	 }
	 return offset;
	 }
	
	 //停止计时
	 function fnStopInterval()
	 {
	 window.clearInterval(oInterval);
	 }
	
	 //自动完成提示
	 function beginSearch(){
	 if(objTxt.value.length>0 && tempValue!=objTxt.value)
	 {
	 sumSearchCount=0;
	 tempValue=objTxt.value;
	 var iframe_show = document.getElementById("coverddl");
	 var div_value = document.getElementById("divMsg");
	 iframe_show.style.display="block";
	 div_value.style.top=top+"px";
	 div_value.style.display="block";
	 div_value.style.left=left+"px";
	 div_value.style.width=width+"px";
	 div_value.innerHTML="";
	 var leng = texts.length;
	 var txt_value = objTxt.value;
	 var row="";
	 for(var i=0;i<leng;i++){
	 if(texts[i].indexOf(txt_value)!=-1){
	 row = row + "<div style="/" mce_style="/""font-size:"+fontSize+"px; display:block; padding-top:2px; padding-bottom:"+paddingBottom+"px; width:100%/" id='divsearch_"+i+"' onmouseover=/"this.style.backgroundColor='"+backGroundColor+"';currentIndex="+i+";/" onmouseout=/"this.style.backgroundColor='';currentIndex=-1;/" onclick=/"span_click(this)/" >"+texts[i]+"</div>";
	 tempDiv[sumSearchCount]=i;
	 sumSearchCount++;
	 }
	 }
	 div_value.innerHTML=row;
	 }
	 else if(objTxt.value.length==0 || objTxt.value == null)
	 {
	 document.getElementById("coverddl").style.display="none";
	 document.getElementById("divMsg").innerHTML="";
	 }
	 }
	
	 //提示内容单击保存到文本框中
	 function span_click(sp)
	 {
	 clear();
	 objTxt.value=sp.innerHTML;
	 document.getElementById(ddlName).options[sp.id.substring(sp.id.indexOf('_')+1,sp.id.length)].selected="selected";
	 document.getElementById(ddlName).fireEvent("onchange");
	 }
	
	 //停止查询，关闭提示
	 function closeSearch()
	 {
	 var tbl = document.activeElement.parentElement;
	 if(tbl && tbl.id!="divMsg")//防止使用上下键后丢失提示内容
	 {
	 clear();
	 document.getElementById("divMsg").innerHTML="";
	 }
	 else if(currentIndex==-1)
	 {
	 clear();
	 document.getElementById("divMsg").innerHTML="";
	 }
	 }
	
	 //清空提示
	 function clear()
	 {
	 fnStopInterval();
	 values=null;
	 texts=null;
	 tempDiv=null;
	 currentIndex=-1;
	 tempValue="";
	 document.getElementById("coverddl").style.display="none";
	 document.getElementById("divMsg").style.display="none";
	 }
	
	 //使用键盘上下方向键和enter键
	 function changeSelect()
	 {
	 var iframeContent = document.getElementById("coverddl");
	 if(iframeContent && iframeContent.style.display=="block")
	 {
	 if (event.keyCode == 38 || event.keyCode == 40 || event.keyCode == 13)
	 {
	
	 if(currentIndex!=-1) document.getElementById("divsearch_"+tempDiv[currentIndex]).style.backgroundColor="";
	 if (event.keyCode == 38 && currentIndex > 0)
	 {
	 currentIndex--;
	 document.getElementById("divsearch_"+tempDiv[currentIndex]).style.backgroundColor="#3366CC";
	 }
	 else if (event.keyCode == 40 && currentIndex < sumSearchCount-1)
	 {
	 currentIndex++;
	 document.getElementById("divsearch_"+tempDiv[currentIndex]).style.backgroundColor="#3366CC";
	 }
	 else if (event.keyCode == 13)
	 {
	 if(currentIndex > -1)
	 {
	 var divpart = document.getElementById("divsearch_"+tempDiv[currentIndex]);
	 objTxt.value=divpart.innerHTML;
	 document.getElementById(ddlName).options[tempDiv[currentIndex]].selected="selected";
	 clear();
	 //document.getElementById(ddlName).fireEvent("onchange");
	 //document.form1.onsubmit=function (){return false;};
	 }
	 }
	 }
	 }
	 }
	
	
	// --></mce:script>
	</head>
	<body>
	 <form id="form1" runat="server">
	 <div>
	 <input type="text" id="txtSearch" autocomplete="off" onkeydown="changeSelect()" onfocus="fnStartInterval(this,'DropDownList1')" onblur="closeSearch()" />
	 <asp:DropDownList ID="DropDownList1" runat="server" DataTextField="slr_realname" DataValueField="systemloginrecord_id" DataSourceID="ObjectDataSource1" Width="130px" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
	 </asp:DropDownList><asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="GetRecordDS"
	 TypeName="TestDAL"></asp:ObjectDataSource>
	 </div>
	 <iframe id="coverddl" style="position:absolute; z-index:2; display:none;" mce_style="position:absolute; z-index:2; display:none;" >
	
	 </iframe>
	 <div style="z-index:3; display:none; text-align:left; position:absolute; border:solid 1px;" mce_style="z-index:3; display:none; text-align:left; position:absolute; border:solid 1px;" id="divMsg">
	 </div>
	 <div>
	 <input type="text" ID="txtTwo" runat="server" autocomplete="off" onkeydown="changeSelect()" onfocus="fnStartInterval(this,'DropDownList2')" onblur="closeSearch()" />
	 <asp:DropDownList ID="DropDownList2" DataTextField="Slr_name" DataValueField="Systemloginrecord_id" runat="server" DataSourceID="ObjectDataSource1">
	 </asp:DropDownList>
	 </div>
	 </form>
	</body>

	</html>
试试其它关键字
　文本框　　智能提示　
同语言下
可能有用的
rock870210贡献的其它代码(12)