快捷導(dǎo)航

用javascript模仿ie的自動完成類似自動完成功的表單

更新時(shí)間：2012年12月12日 10:52:29 作者：

最近在寫一個(gè)javascript框架,看見網(wǎng)上有不少自動完成功能的表單,于是用javascript寫了一個(gè)，需要的朋友可以參考下

最近在寫一個(gè)javascript框架,看見網(wǎng)上有不少自動完成功能的表單,所以一時(shí)興起,用javascript寫了一個(gè),為自己的框架增點(diǎn)色.

步驟:
1.傳入兩個(gè)參數(shù),第一個(gè)是你要綁定的表單對象,第二個(gè)是你要檢索的數(shù)組.
2.動態(tài)建立一個(gè)div做為你要自動完成的層,設(shè)置屬性和事件(我在這里并沒有設(shè)置div的visible和display屬性,而是將它的left設(shè)為"-1000px",這樣就移出了瀏覽器之外,達(dá)到了隱藏的效果.
3.對傳入的數(shù)組進(jìn)行檢索,找出與輸入內(nèi)容匹配或相近的項(xiàng),并將其存入一個(gè)新的數(shù)組.這里用正則表達(dá)式進(jìn)行了四次迭代,寫的不好,還望見諒.
4.對存入檢索后數(shù)據(jù)的那個(gè)新數(shù)組進(jìn)行處理,去掉內(nèi)容重復(fù)的項(xiàng),并將其寫進(jìn)div內(nèi).
5.設(shè)置div的left,top,width即可.

下面看給出的完整代碼:

復(fù)制代碼代碼如下:

 
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"; 
} 
} 
}. 

調(diào)用的html代碼:

復(fù)制代碼代碼如下:

 
<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> 

代碼沒有優(yōu)化,還請多多包涵,這里給出一個(gè)思路,讓各位見笑了.

您可能感興趣的文章: