快捷導(dǎo)航

十分鐘打造AutoComplete自動(dòng)完成效果代碼

更新時(shí)間：2009年12月26日 23:37:53 作者：

十分鐘打造山寨版谷歌AutoComplete，因?yàn)槭鞘昼姶蛟斐鰜淼模灾豢紤]表面效果，其他全部忽略，絕對的山寨。

.老生常談---XmlHttpRequest
代碼

 
var xmlHttp; 
function createXmlHttpRequest() 
{ 
if(window.ActieveXObject) 
{ 
xmlHttp=new ActieveXObject("Microsoft.XMLHTTP"); 
} 
else if(window.XMLHttpRequest) 
{ 
xmlHttp=new XMLHttpRequest(); 
} 
} 

如果不用Jquery手寫javascript，上面要改成XmlHttpRequest對象池，這就不寫了。
.觸發(fā)AutoComplete函數(shù)
代碼

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

 
function $E(argument) 
{ 
return document.getElementById(argument); 
} 

function GetInfo(e) 
{ 
var input=$E("Text1").value; 
if(input.length<=0) 
{ 
changeDisplay(); 
} 
else 
{ 
createXmlHttpRequest(); 
var keyword=e.value; 

xmlHttp.onreadystatechange=readyStateChangeHandle; 
var url="AutoComplete.ashx?keyword="+keyword+"&timeStamp="+new Date().getTime(); 
xmlHttp.open("GET",url,true); 
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); 
xmlHttp.send(null); 
} 
} 

這里服務(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等。
.鼠標(biāo)move變色

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

 
function changecolor(event) 
{ 

event.style.background="#00FFFF"; 

} 
function changebackcolor(event) 
{ 
event.style.background="#FFFFFF" 
} 

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

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

 
function ChangeDivDisplay(e) 
{ 
document.getElementById("Text1").value=e.firstChild.data; 
var html=""; 
document.getElementById("searchResult").innerHTML=html; 
document.getElementById("searchResult").style.visibility="hidden"; 
} 

function changeDisplay() 
{ 
var html=""; 
document.getElementById("searchResult").innerHTML=html; 
document.getElementById("searchResult").style.visibility="hidden"; 
} 

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

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

 
function readyStateChangeHandle() 
{ 
if(xmlHttp.readyState==4) 
{ 
if(xmlHttp.status==200) 
{ 

if(xmlHttp.responseText!="]") 
{ 
var resultDiv=$E("searchResult"); 

var josnStr=eval('('+xmlHttp.responseText+')'); 
var html=""; 

for (var key in josnStr) 
{ 

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+"本書</span></span>"; 

} 
html+= "<span style=\" width: 195px; background-color: #FFFFFF; display: block;\"><a href=\"javascript:changeDisplay()\" style=\"float: right;\">關(guān)閉</a></span>"; 

resultDiv.innerHTML=html; 
document.getElementById("searchResult").style.visibility="visible"; 
} 
else 
{ 
changeDisplay(); 
} 
} 
} 
} 