发布于 2016-10-04 06:05:10 | 141 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


最近在写一个javascript框架,看见网上有不少自动完成功能的表单,于是用javascript写了一个,需要的朋友可以参考下
最近在写一个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> 

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

最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务