北京時間---2009年12月26日 17：10 

前言：因為是十分鐘打造出來的，所以只考慮表面效果，其他全部忽略，絕對的山寨

1.老生常談---XmlHttpRequest

代碼

 1             var xmlHttp;
 2         function createXmlHttpRequest()
 3         {
 4             if(window.ActiveXObject)
 5             {
 6                 xmlHttp=new ActieveXObject("Microsoft.XMLHTTP");
 7             }
 8             else if(window.XMLHttpRequest)
 9             {
10                 xmlHttp=new XMLHttpRequest();
11             }
12         }

如果不用Jquery手寫javascript，上面要改成XmlHttpRequest對象池，這就不寫了。

2.觸發(fā)AutoComplete函數(shù)

代碼

 1   function $E(argument)
 2    {
 3     return document.getElementById(argument);
 4    }
 5 
 6  function GetInfo(e)
 7         {
 8     var input=$E("Text1").value;
 9         if(input.length<=0)
10         {
11          changeDisplay();
12         }
13             else
14             {
15                 createXmlHttpRequest();
16                 var keyword=e.value;
17             
18                 xmlHttp.onreadystatechange=readyStateChangeHandle;
19                 var url="AutoComplete.ashx?keyword="+keyword+"&timeStamp="+new Date().getTime();
20                 xmlHttp.open("GET",url,true);
21                 xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
22                 xmlHttp.send(null);    
23             }
24         }

這里服務(wù)器后臺是在.NET平臺下的xxx.ashx一般處理程序響應(yīng)客戶端得請求，當(dāng)然也可以用webserviece或者aspx.cs或WCF來響應(yīng)客戶端得請求，但是需要注意的是webservice響應(yīng)客戶端必須遵循遵循soap協(xié)議（當(dāng)然也可以通過修改配置文件讓webservice響應(yīng)get或post請求），xxx.ashx和aspx.cs響應(yīng)客戶端要遵循h(huán)ttp協(xié)議。當(dāng)然后臺也可以PHP或JAVA等。

3.鼠標(biāo)move變色

4.選區(qū)隱藏與出現(xiàn)

代碼

 1   function ChangeDivDisplay(e)
 2   {
 3    document.getElementById("Text1").value=e.firstChild.data;
 4    var html="";
 5    document.getElementById("searchResult").innerHTML=html;
 6    document.getElementById("searchResult").style.visibility="hidden";
 7   }
 8   
 9   function changeDisplay()
10   {
11   var html="";
12   document.getElementById("searchResult").innerHTML=html;
13   document.getElementById("searchResult").style.visibility="hidden";
14   }

5.回調(diào)函數(shù)

代碼

 1     function readyStateChangeHandle()
 2         {
 3             if(xmlHttp.readyState==4)
 4             {
 5                 if(xmlHttp.status==200)
 6                 {    
 7             
 8                   if(xmlHttp.responseText!="]")
 9                   {
10                var resultDiv=$E("searchResult");
11                
12                var josnStr=eval('('+xmlHttp.responseText+')');
13                var html="";
14            
15                   for (var key in josnStr)
16                   {
17 
18    html+= "<span onmousemove=\"changecolor(this)\" onclick=\"ChangeDivDisplay(this)\" onmouseout=\"changebackcolor(this)\" style=\"width: 195px; text-align: left; background-color: #FFFFFF; display: block; cursor: default;\">"+josnStr[key].bookName +"<span style=\" color: #008000; float: right;\">"+josnStr[key].bookCount+"結(jié)果</span></span>";
19 
20                   }
21                   html+=  "<span style=\" width: 195px; background-color: #FFFFFF; display: block;\"><a href=\"javascript:changeDisplay()\" style=\"float: right;\">關(guān)閉</a></span>";
22            
23                   resultDiv.innerHTML=html;
24                   document.getElementById("searchResult").style.visibility="visible";
25                 }        
26                 else
27                 {
28                 changeDisplay();
29                 }            
30             }
31         }
32     }

這里我用的是json,當(dāng)然也可以用XML或者字符串。

 北京時間---2009年12月26日 17：20 

效果圖：

OVER!

沒有數(shù)據(jù)庫-   -！/Files/zhanglei644213943/autocomplete.rar