页面版文本框智能提示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 相关文章推荐
jquery text,radio,checkbox,select操作实现代码
Jul 09 Javascript
jquery tools 系列 scrollable学习
Sep 06 Javascript
Javascript计算时间差的函数分享
Jul 04 Javascript
关于jquery css的使用介绍
Apr 18 Javascript
原生javascript实现无间缝滚动示例
Jan 28 Javascript
JQuery入门基础小实例(1)
Sep 17 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
May 26 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
Aug 24 Javascript
使用Node.js实现简易MVC框架的方法
Aug 07 Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 Javascript
vue项目前端错误收集之sentry教程详解
May 27 Javascript
vue实现一拉到底的滑动验证
Jul 25 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
PHP安装全攻略:APACHE
2006/10/09 PHP
php模拟js函数unescape的函数代码
2012/10/20 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
jQuery用unbind方法去掉hover事件及其他方法介绍
2013/03/18 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
获取中文字符串的实际长度代码
2014/06/05 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
基于js中的原型、继承的一些想法
2016/08/10 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
vue中使用ueditor富文本编辑器
2018/02/08 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
2019/11/24 Javascript
Vue组件模板及组件互相引用代码实例
2020/03/11 Javascript
JavaScript实现点击出现子菜单效果
2021/02/08 Javascript
python实现FTP服务器服务的方法
2017/04/11 Python
python出现&quot;IndentationError: unexpected indent&quot;错误解决办法
2017/10/15 Python
python得到windows自启动列表的方法
2018/10/14 Python
Django的models模型的具体使用
2019/07/15 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
关于Python3 类方法、静态方法新解
2019/08/30 Python
Pytest mark使用实例及原理解析
2020/02/22 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
keras 解决加载lstm+crf模型出错的问题
2020/06/10 Python
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
波兰家具和室内装饰品购物网站:Vivre
2018/04/10 全球购物
思想专业自荐信范文
2013/12/25 职场文书
小学语文教学随笔
2015/08/14 职场文书
Python异常类型以及处理方法汇总
2021/06/05 Python
mongodb数据库迁移变更的解决方案
2021/09/04 MongoDB
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫