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

ASP.NET
asp.net css注释的影响
ASP.NET与数据库相关技巧
关于HtmlForm控件
三色交替的下拉列表框
精通ASP.NET中弹出窗口技术
ASP.NET Forums与现有系统整合方案示例
ASP.NET操作IIS中的虚拟目录
DataGrid与SQL Server 2000数据绑定
如何让Web应用程序在Client端实现导出报表功能
如何保证web app中的Send Email线程稳定性
关于用ASP.Net识别远程主机服务器种类
ASP.NET中上传下载文件
提高ASP.NET性能的方法
asp.net StreamReader 创建文件
asp.net如何生成图片验证码(简单)
一个.net 压缩位图至JPEG的代码
简单的SQL Server数据库数据读取与数据操作
获取网站的RSS聚合到自己的网页
.Net程序中整站通用的防SQL注入函数
asp.net生成缩略图及给原始图加水印的函数

No. « 19 20 21 22 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2010-01-10   浏览: 100 ::
收藏到网摘: 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>