欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-03-09 10:38:53
原本准备在上一篇中直接修改的,无奈编辑功能太差,打开一堆html代码,空格“ ”都看的人眼花缭乱,只好另开一篇。 升级说明:添加了针对一个界面多个职能提示位置的设定...
原本准备在上一篇中直接修改的,无奈编辑功能太差,打开一堆html代码,空格“&nbsp”都看的人眼花缭乱,只好另开一篇。

升级说明:添加了针对一个界面多个职能提示位置的设定,只需修改文本框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">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<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>
<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;" style="position:absolute; z-index:2; display:none;" >

</iframe>
<div style="z-index:3; display:none; text-align:left; position:absolute; border:solid 1px;" 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()" /><br />
<asp:dropdownlist id="dropdownlist2" datatextfield="slr_name" datavaluefield="systemloginrecord_id" runat="server" datasourceid="objectdatasource1">
</asp:dropdownlist>
</div>
</form>
</body>

</html>