您的位置：首页 > Web前端 > JavaScript

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

2012-12-12 00:00 826 查看

最近在写一个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>

代码没有优化,还请多多包涵,这里给出一个思路,让各位见笑了.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航