页面版文本框智能提示JS代码


Posted in Javascript onNovember 20, 2009

于是这code便诞生了,如下:

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
<title>无标题页</title> 
<script type="text/javascript" language="javascript"> 
var currentIndex=-1;//保存提示框中选择的索引 
var sumSearchCount=0;//保存提示框中数据数量 
var tempValue="";//保存当前输入的要搜索的内容 
var objTxt="";//保存文本框对象 
var top=0;//提示框的top 
var left=0;//提示框的left 
var width=0;//提示框的width 
var values = new Array();//保存下拉列表的值 
var texts = new Array();//保存下拉列表的显示内容 
var tempDiv=new Array();//保存提示框中索引对应的values索引 
//获取下拉列表的值和显示内容 
function getSelectValues(ddl){ 
ddlvalue = document.getElementById("DropDownList1"); 
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){ 
getSelectValues("DropDownList1"); 
objTxt=txt_id;//获取输入文本框对象 
top = getLength("offsetTop")+objTxt.offsetHeight; 
left= getLength("offsetLeft"); 
width=objTxt.offsetWidth; 
oInterval = window.setInterval("beginSearch()",2000);//启用计时 
} 
//获取对应属性的长度 
function getLength(attribute) 
{ 
var offset = 0; 
var txt_input = document.getElementById("txtSearch"); 
while (item) 
{ 
offset += txt_input[attribute]; 
txt_input = txt_input.offsetParent; 
} 
return offset; 
} 
//停止计时 
function fnStopInterval() 
{ 
window.clearInterval(oInterval); 
} 
//自动完成提示 
function beginSearch(){ 
if(objTxt.value.length>0 && tempValue!=objTxt.value) 
{ 
sumSearchCount=0; 
tempValue=objTxt.value; 
var div_show = document.getElementById("divMsg"); 
div_show.style.top=top+"px"; 
div_show.style.display="block"; 
div_show.style.left=left+"px"; 
div_show.style.width=width+"px"; 
div_show.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:14px; display:block; width:100%\" id='divsearch_"+i+"' onmouseover=\"this.style.backgroundColor='#3366CC';currentIndex="+i+";\" onmouseout=\"this.style.backgroundColor='';currentIndex=-1;\" onclick=\"span_click(this)\" >"+texts[i]+"</div>"; 
tempDiv[sumSearchCount]=i; 
sumSearchCount++; 
} 
} 
div_show.innerHTML=row; 
} 
else if(objTxt.value.length==0 || objTxt.value == null) 
{ 
var div_msg = document.getElementById("divMsg"); 
div_msg.style.display="none"; 
div_msg.innerHTML=""; 
} 
} 
//提示内容单击保存到文本框中 
function span_click(sp) 
{ 
clear(); 
objTxt.value=sp.innerHTML; 
document.getElementById("DropDownList1").options[sp.id.substring(sp.id.indexOf('_')+1,sp.id.length)].selected="selected"; 
} 
//停止查询,关闭提示 
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(); 
currentIndex=-1; 
tempValue=""; 
document.getElementById("divMsg").style.display="none"; 
} 
//使用键盘上下方向键和enter键 
function changeSelect() 
{ 
var divContent = document.getElementById("divMsg"); 
if(divContent && divContent.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("DropDownList1").options[tempDiv[currentIndex]].selected="selected"; 
clear(); 
} 
} 
} 
} 
} 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<input type="text" id="txtSearch" autocomplete="off" onkeydown="changeSelect()" onfocus="fnStartInterval(this)" onblur="closeSearch()" runat="server" /> 
<asp:DropDownList ID="DropDownList1" runat="server" DataTextField="slr_realname" DataValueField="systemloginrecord_id" DataSourceID="ObjectDataSource1" Width="130px"> 
</asp:DropDownList><asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="GetRecordDS" 
TypeName="TestDAL"></asp:ObjectDataSource> 
</div> 
<div style="display:none; z-index:2; text-align:left; position:absolute; border:solid 1px;" id="divMsg"> 
</div> 
</form> 
</body> 
</html>

<input type="text" id="txtSearch" autocomplete="off"。。。这里加入了autocomplete属性,屏蔽了文本框输入记录提示功能,虽然这个功能很好,但是在这里却成了绊脚石。呵呵
以前没有写博客的习惯,好多不经常使用的东西用过就忘了。以后是要整理整理了。
Javascript 相关文章推荐
繁简字转换功能
Jul 19 Javascript
js 通用javascript函数库整理
Aug 14 Javascript
在javascript中对于DOM的加强
Apr 11 Javascript
js读取注册表的键值示例
Sep 25 Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 Javascript
js判断空对象的实例(超简单)
Jul 26 Javascript
javascript设置文本框光标的方法实例小结
Nov 04 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
Dec 18 Javascript
ES6 Generator函数的应用实例分析
Jun 26 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 Javascript
js url传值中文乱码之解决之道
Nov 20 #Javascript
js trim函数 去空格函数与正则集锦
Nov 20 #Javascript
div移动 输入框不能输入的问题
Nov 19 #Javascript
ExtJS Window 最小化的一种方法
Nov 18 #Javascript
JS获取dom 对象 ajax操作 读写cookie函数
Nov 18 #Javascript
jquery中的$(document).ready()与window.onload的区别
Nov 18 #Javascript
jQuery html()等方法介绍
Nov 18 #Javascript
You might like
smarty实例教程
2006/11/19 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
jQuery针对各类元素操作基础教程
2014/08/29 Javascript
对比分析json及XML
2014/11/28 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
JS传参及动态修改页面布局
2017/04/13 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
微信小程序之页面拦截器的示例代码
2017/09/07 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
微信小程序以ssm做后台开发的实现示例
2020/04/08 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
[14:36]2014 DOTA2国际邀请赛中国区预选赛5.21 Orenda VS NE
2014/05/22 DOTA
python django集成cas验证系统
2014/07/14 Python
浅析Python中元祖、列表和字典的区别
2016/08/17 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
浅谈python的elementtree模块处理中文注意事项
2020/03/06 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
群胜软件Java笔试题
2012/09/29 面试题
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
电大毕业自我鉴定
2014/02/03 职场文书
原料仓管员岗位职责
2014/04/12 职场文书
大学生入党积极分子自我评价
2014/09/20 职场文书
2015年全国助残日活动方案
2015/05/04 职场文书
2015年六一儿童节活动方案
2015/05/05 职场文书
离婚起诉书范本
2015/05/18 职场文书
2016大学迎新欢迎词
2015/09/29 职场文书
优秀大学生申请书
2019/06/24 职场文书