用javascript模仿ie的自动完成类似自动完成功的表单


Posted in Javascript onDecember 12, 2012

最近在写一个javascript框架,看见网上有不少自动完成功能的表单,所以一时兴起,用javascript写了一个,为自己的框架增点色.

步骤:
1.传入两个参数,第一个是你要绑定的表单对象,第二个是你要检索的数组.
2.动态建立一个div做为你要自动完成的层,设置属性和事件(我在这里并没有设置div的visible和display属性,而是将它的left设为"-1000px",这样就移出了浏览器之外,达到了隐藏的效果.
3.对传入的数组进行检索,找出与输入内容匹配或相近的项,并将其存入一个新的数组.这里用正则表达式进行了四次迭代,写的不好,还望见谅.
4.对存入检索后数据的那个新数组进行处理,去掉内容重复的项,并将其写进div内.
5.设置div的left,top,width即可.

下面看给出的完整代码:

if(!sx) 
var sx={}; 
sx.activex={}; 
sx.activex.autocomplete={ 
bind:function(a,s){ 
var d=document.createElement("div"); 
d.style.position="absolute"; 
d.flag="autocomplete"; 
document.body.appendChild(d); 
d.style.left="-1000px"; 
d.style.height="100px"; 
d.style.overflow="auto"; 
a.onblur=function(){ 
if(document.elementFromPoint(window.event.clientX,window.event.clientY).flag=="autocomplete" || document.elementFromPoint(window.event.clientX,window.event.clientY).parentNode.flag=="autocomplete") 
return; 
d.innerHTML=""; 
d.style.left="-1000px"; 
} 
a.onkeyup=function(){ 
if(a.value=="") { 
d.innerHTML=""; 
return; 
} 
d.innerHTML=""; 
var t=[]; 
for(var i in s){ 
if(eval("/^"+a.value+"$/i").test(s[i])){ 
t.push(s[i]); 
} 
} 
for(var i in s){ 
if(eval("/^"+a.value+".+$/i").test(s[i])){ 
t.push(s[i]); 
} 
} 
for(var i in s){ 
if(eval("/^.+"+a.value+"$/i").test(s[i])){ 
t.push(s[i]); 
} 
} 
for(var i in s){ 
if(eval("/^.+"+a.value+".+$/i").test(s[i])){ 
t.push(s[i]); 
} 
} 
for(var e=0;e<=t.length-2;e++){ 
for(var e1=e+1;e1<=t.length-1;e1++){ 
if(t[e]==t[e1]){ 
for(var e2=e1+1;e2<t.length;e2++){ 
if(t[e2]){ 
t[e2-1]=t[e2]; 
} 
} 
t.length=t.length-1; 
} 
} 
} 
//alert(t); 
for(var i in t){ 
var p=document.createElement("div"); 
p.innerText=t[i]; 
p.onmouseenter=function(){ 
this.style.backgroundColor="blue"; 
} 
p.onmouseleave=function(){ 
this.style.backgroundColor="white"; 
} 
p.onclick=function(){ 
a.value=this.innerText; 
d.style.left="-1000px"; 
} 
d.appendChild(p) 
} 
d.style.top=a.offsetTop+a.offsetHeight+"px"; 
d.style.left=a.offsetLeft+"px"; 
d.style.width=a.offsetWidth+"px"; 
} 
} 
}.

调用的html代码:
<html> 
<head> 
<title>Untitled Document</title> 
</head> 
<body> 
<script src="kongjian.js"></script> 
<input type="text" size="15" id="a"> 
<input type="text" size="15" id="a1"> 
<script> 
sx.activex.autocomplete.bind(document.getElementById("a"),["asd","a","sad","er","ewrew","aadasd","wqqwrqw","asasf","qweqw"]); 
sx.activex.autocomplete.bind(document.getElementById("a1"),["asd","a","sad","er","ewrew","aadasd","wqqwrqw","asasf","qweqw"]); 
</script> 
</body> 
</html>

代码没有优化,还请多多包涵,这里给出一个思路,让各位见笑了.
Javascript 相关文章推荐
JS获取IUSR_机器名和IWAM_机器名帐号的密码
Dec 06 Javascript
Javascript var变量隐式声明方法
Oct 19 Javascript
jQuery事件绑定.on()简要概述及应用
Feb 07 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 Javascript
js style动态设置table高度
Oct 21 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
Sep 21 Javascript
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 Javascript
Layui数据表格之获取表格中所有的数据方法
Aug 20 Javascript
开源一个微信小程序仪表盘组件过程解析
Jul 30 Javascript
layer弹出层自适应高度,垂直水平居中的实现
Sep 16 Javascript
javascript实现图片切换的幻灯片效果源代码
Dec 12 #Javascript
javascript跑马灯悬停放大效果实现代码
Dec 12 #Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
Dec 12 #Javascript
javascript采用数组实现tab菜单切换效果
Dec 12 #Javascript
javascript仿qq界面的折叠菜单实现代码
Dec 12 #Javascript
日历查询的算法 如何计算某一天是星期几
Dec 12 #Javascript
javascript实现日历控件(年月日关闭按钮)
Dec 12 #Javascript
You might like
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
php过滤表单提交的html等危险代码
2014/11/03 PHP
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
js常用自定义公共函数汇总
2014/01/15 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
2016/03/08 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
详解nodejs微信公众号开发——5.素材管理接口
2017/04/11 NodeJs
ReactNative短信验证码倒计时控件的实现代码
2017/07/20 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
vue-resourc发起异步请求的方法
2020/02/11 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
2020/04/14 Javascript
[50:04]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第二局
2016/02/28 DOTA
python批量提取word内信息
2015/08/09 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
python3个性签名设计实现代码
2018/06/19 Python
python处理数据,存进hive表的方法
2018/07/04 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
解决Pycharm 运行后没有输出的问题
2021/02/05 Python
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
英国健身超市:Fitness Superstore
2019/06/17 全球购物
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
车间组长岗位职责
2013/12/20 职场文书
淘宝网店营销策划书
2014/01/11 职场文书
卖车协议书范例
2014/09/16 职场文书
民警个人对照检查剖析材料
2014/09/17 职场文书
医学检验专业自荐信
2014/09/18 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
2015年档案管理工作总结
2015/04/08 职场文书
教师读书笔记
2015/06/29 职场文书
幼师自荐信范文(2016推荐篇)
2016/01/28 职场文书
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android