用javascript模仿ie的自動完成類似自動完成功的表單_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;efor(var e1=e 1;e1if(t[e]==t[e1]){
for(var e2=e1 1;e2if(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.appendChildldld (p)
}
d.style.top=a.offsetTop a.offsetHeight "px";
d.style.left=a.offsetLeft "px";
d.style.width =a.offsetWidth "px";
}

}
}.

呼叫的html代碼:

程式碼如下:










<script> <BR>sx.activex.autocomplete.bind(document.getElementById("a"),["asd","a" ,"sad","er","ewrew","aadasd","wqqwrqw","asasf","qweqw"]); </script>

sx.activex.autocomplete.bind(document.getElementById("a1") ,["asd","a","sad","er","ewrew","aadasd","wqqwrqw","asasf","qweqw"]);
程式碼沒有最佳化,還請多多包涵,這裡給出一個思路,讓各位見笑了.