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

來源:互聯網
上載者:User

最近在寫一個javascript架構,看見網上有不少自動完成功能的表單,所以一時興起,用javascript寫了一個,為自己的架構增點色.

步驟:
1.傳入兩個參數,第一個是你要綁定的表單對象,第二個是你要檢索的數組.
2.動態建立一個div做為你要自動完成的層,設定屬性和事件(我在這裡並沒有設定div的visible和display屬性,而是將它的left設為"-1000px",這樣就移出了瀏覽器之外,達到了隱藏的效果.
3.對傳入的數組進行檢索,找出與輸入內容匹配或相近的項,並將其存入一個新的數組.這裡用Regex進行了四次迭代,寫的不好,還望見諒.
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>

代碼沒有最佳化,還請多多包涵,這裡給出一個思路,讓各位見笑了.

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.