最近在寫一個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>
代碼沒有優化,還請多多包涵,這裡給出一個思路,讓各位見笑了.