当前位置: 首页 > 图文教程 > 网络编程 > ASP.NET > asp.net 页面版文本框智能提示JSCode (升级版)

ASP.NET
asp.net GridView控件中模板列CheckBox全选、反选、取消
asp.net GridView 删除时弹出确认对话框(包括内容提示)
asp.net DropDownList 三级联动下拉菜单实现代码
asp DataTable添加列和行的三种方法
Asp.net 页面调用javascript变量的值
asp.net 长文章通过设定的行数分页
asp.net 定时间点执行任务的简易解决办法
asp.net 页面延时五秒，跳转到另外的页面
asp.net 动态输出透明gif图片
asp.net DataList与Repeater用法区别
asp.net Javascript获取CheckBoxList的value
asp.net程序在调式和发布之间图片路径问题的解决方法
asp.net下生成英文字符数字验证码的代码
asp.net 页面版文本框智能提示JSCode (升级版)
ASP.NET URL伪静态重写实现方法
ASP.NET 2.0 中Forms安全认证
asp.net 动态添加多个用户控件
asp.net Repeater显示父子表数据,无闪烁
asp.net 无法获取的内部内容，因为该内容不是文本 的解决方法
asp.net GridView排序简单实现

No. « 167 168 169 170 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2010-01-10   浏览: 50 ::
收藏到网摘: n/a

模拟百度，Google智能提示，非与服务器端交互的，数据源来自已经绑定好的下拉列表。纯客户端脚本 升级版 原本准备在上一篇中直接修改的，无奈编辑功能太差，打开一堆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>