页面版文本框智能提示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 相关文章推荐
IE与FireFox的兼容性问题分析
Apr 22 Javascript
学习jquery之一
Apr 27 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
Dec 10 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
javascript实现表格增删改操作实例详解
May 15 Javascript
Node.js 条形码识别程序构建思路详解
Feb 14 Javascript
浅析Ajax语法
Dec 05 Javascript
js 奇葩技巧之隐藏代码
Aug 11 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
vue中关闭eslint的方法分析
Aug 04 Javascript
前端Electron新手入门教程详解
Jun 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
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
很好用的js日历算法详细代码
2013/03/07 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
jQuery实现手势解锁密码特效
2017/08/14 jQuery
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
JavaScript设计模式之观察者模式与发布订阅模式详解
2020/05/07 Javascript
python基础教程之字典操作详解
2014/03/25 Python
python 简单备份文件脚本v1.0的实例
2017/11/06 Python
Python标准库inspect的具体使用方法
2017/12/06 Python
python3 requests库文件上传与下载实现详解
2019/08/22 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
家用个人磨皮机:Trophy Skin
2017/03/30 全球购物
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
linux比较文件内容的命令是什么
2015/09/23 面试题
幼儿园教师国培感言
2014/02/02 职场文书
保险专业大学生职业规划书
2014/03/03 职场文书
保险内勤岗位职责
2014/04/05 职场文书
会员卡清退活动总结
2014/08/27 职场文书
就业协议书
2014/09/12 职场文书
写给医院的感谢信
2015/01/22 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
团委工作总结2015
2015/04/02 职场文书
应收账款管理制度
2015/08/06 职场文书
HTML基础详解(上)
2021/10/16 HTML / CSS
动视暴雪取消疫苗禁令 让所有员工返回线下工作
2022/04/03 其他游戏