asp.net 页面版文本框智能提示JSCode (升级版)

　　原本准备在上一篇中直接修改的，无奈编辑功能太差，打开一堆html代码，空格“ ”都看的人眼花缭乱，只好另开一篇。

　　升级说明：添加了针对一个界面多个职能提示位置的设定，只需修改文本框onfocus="fnStartInterval(this,'DropDownList2')"，

　　设置好相应的参数即可，同时修复了在IE6下div无法遮盖下拉列表的问题，（IE6下无论如何设置select的z-index或div的z-index属性均无济于事），关于这个就是利用了一个iframe，将其盖在div要显示的位置，然后div再放在iframe上方即可。即使下方有select元素，也没关系了。下面是最新code：

复制代码代码如下:

　　<%@ 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">

<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);

　　}

　　--></style>

<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='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;};

　　}

　　// --></script>

　　</head>

　　<body>

　　<div>

　　<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>

　　</div>

　　<div>

　　<asp:DropDownList ID="DropDownList2" DataTextField="Slr_name" DataValueField="Systemloginrecord_id" runat="server" DataSourceID="ObjectDataSource1">

　　</asp:DropDownList>

　　</div>

　　</form>

　　</body>

　　</html>

教程首页更多教程