页面版文本框智能提示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函数
Aug 01 Javascript
javascript 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
js parentElement和offsetParent之间的区别
Mar 23 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
文本框input聚焦失焦样式实现代码
Oct 12 Javascript
JS取文本框中最小值的简单实例
Nov 29 Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 Javascript
jQuery组件easyui对话框实现代码
Aug 25 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
JavaScript省市级联下拉菜单实例
Feb 14 Javascript
原生javascript AJAX 三级联动的实现代码
May 04 Javascript
理理Vue细节(推荐)
Apr 16 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 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
PHP获取photoshop写入图片文字信息的方法
2015/03/31 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
tp5修改(实现即点即改)
2019/10/18 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
PHP+Redis事务解决高并发下商品超卖问题(推荐)
2020/08/03 PHP
javaScript同意等待代码实现心得
2011/01/01 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
ExtJS4中使用mixins实现多继承示例
2013/12/03 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
基于jquery animate操作css样式属性小结
2015/11/27 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
移动设备手势事件库Touch.js使用详解
2017/08/18 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
mock.js模拟数据实现前后端分离
2019/07/24 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
研究Python的ORM框架中的SQLAlchemy库的映射关系
2015/04/25 Python
深入解析Python编程中JSON模块的使用
2015/10/15 Python
详解Python中的文件操作
2016/08/28 Python
Python程序退出方式小结
2017/12/09 Python
python内置数据类型之列表操作
2018/11/12 Python
python实现逐个读取txt字符并修改
2018/12/24 Python
Python发展史及网络爬虫
2019/06/19 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
python软件都是免费的吗
2020/06/18 Python
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
关于读书的演讲稿300字
2014/08/27 职场文书
工作年限证明模板
2015/06/15 职场文书
运动会新闻报道稿
2015/07/22 职场文书