页面版文本框智能提示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 相关文章推荐
javascript event 事件解析
Jan 31 Javascript
JavaScript中创建对象和继承示例解读
Feb 12 Javascript
json中换行符的处理方法示例介绍
Jun 10 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
Sep 09 Javascript
js改变html的原有内容实现方法
Oct 05 Javascript
node.js中debug模块的简单介绍与使用
Apr 25 Javascript
详解A标签中href=&quot;&quot;的几种用法
Aug 20 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
Apr 09 Javascript
JS实现手写 forEach算法示例
Apr 29 Javascript
vue style width a href动态拼接问题的解决
Aug 07 Javascript
在vue中获取wangeditor的html和text的操作
Oct 23 Javascript
使用Typescript开发微信小程序的步骤详解
Jan 12 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中++i 与 i++ 的区别
2012/08/08 PHP
如何批量替换相对地址为绝对地址(利用bat批处理实现)
2013/05/27 PHP
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
yii2 数据库读写分离配置示例
2017/02/10 PHP
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
jQuery学习笔记之jQuery的DOM操作
2010/12/22 Javascript
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
JavaScript实现动态创建CSS样式规则方案
2014/09/06 Javascript
JS仿Windows开机启动Loading进度条的方法
2015/02/26 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
python抓取网页中的图片示例
2014/02/28 Python
Python基于DES算法加密解密实例
2015/06/03 Python
python实现文件快照加密保护的方法
2015/06/30 Python
Python 中pandas.read_excel详细介绍
2017/06/23 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
python批量生成身份证号到Excel的两种方法实例
2021/01/14 Python
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
打印机墨盒:123Inkjets
2017/02/16 全球购物
Expedia韩国官网:亚洲发展最快的在线旅游门户网站
2018/02/26 全球购物
最新销售员个人自荐信
2013/09/21 职场文书
办公室前台的岗位职责
2013/12/20 职场文书
银行竞聘演讲稿
2014/05/16 职场文书
房产公证书格式
2015/01/26 职场文书
环卫工人慰问信
2015/02/15 职场文书
雾霾停课通知
2015/04/24 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
2015年英语教师工作总结
2015/05/20 职场文书