用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 Html结构转字符串形式显示代码
Nov 15 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
Feb 18 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
Mar 01 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
Apr 17 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
May 03 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
Feb 18 Javascript
vue element-ui table表格滚动加载方法
Mar 02 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
Sep 15 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
Sep 15 Javascript
VUE中使用HTTP库Axios方法详解
Feb 05 Javascript
JavaScript实现拖拽功能
Feb 11 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 Smarty模板生成html文档的方法
2010/04/12 PHP
PHP删除HTMl标签的实现代码
2013/06/30 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
基于Jquery实现表格动态分页实现代码
2011/06/21 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
javascript实现随机生成DIV背景色
2016/06/20 Javascript
nodejs redis 发布订阅机制封装实现方法及实例代码
2016/12/15 NodeJs
利用ES6语法重构React组件详解
2017/03/02 Javascript
JavaScript常用数组操作方法,包含ES6方法
2020/05/10 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
2019/07/18 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
五分钟搞懂Vuex实用知识(小结)
2019/08/12 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
详细分析Node.js 多进程
2020/06/22 Javascript
Python获取单个程序CPU使用情况趋势图
2015/03/10 Python
python+matplotlib绘制简单的海豚(顶点和节点的操作)
2018/01/02 Python
python使用Qt界面以及逻辑实现方法
2019/07/10 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
挂靠协议书范本
2014/04/22 职场文书
班主任个人工作反思
2014/04/28 职场文书
社会实践的活动方案
2014/08/22 职场文书
公安民警正风肃纪剖析材料
2014/10/10 职场文书
2014年小学安全工作总结
2014/12/04 职场文书
护理工作个人总结
2015/03/03 职场文书
大学开学感言
2015/08/01 职场文书
七夕情人节问候语
2015/11/11 职场文书
股东协议书范本2016
2016/03/21 职场文书
SSM VUE Axios详解
2021/10/05 Vue.js