asp.net 页面版文本框智能提示JSCode (升级版)
程序员文章站
2024-03-08 15:42:04
原本准备在上一篇中直接修改的，无奈编辑功能太差，打开一堆html代码，空格“ ”都看的人眼花缭乱，只好另开一篇。 升级说明：添加了针对一个界面多个职能提示位置的设定...
原本准备在上一篇中直接修改的，无奈编辑功能太差，打开一堆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">
<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>
升级说明：添加了针对一个界面多个职能提示位置的设定，只需修改文本框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>
下一篇： 全方位讲解Java的面向对象编程思想