十分鐘打造AutoComplete自動完成效果代碼

2019-11-21 00:52:14

字體：大中小

來源：轉載

供稿：網友

.老生常談---XmlHttpRequest
代碼

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

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

復制代碼代碼如下:

 
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); 
} 
} 

這里服務器后臺是在.NET平臺下的xxx.ashx一般處理程序響應客戶端得請求，當然也可以用webserviece或者aspx.cs或WCF來響應客戶端得請求，但是需要注意的是webservice響應客戶端必須遵循遵循soap協議（當然也可以通過修改配置文件讓webservice響應get或post請求），xxx.ashx和aspx.cs響應客戶端要遵循http協議。當然后臺也可以PHP或JAVA等。
.鼠標move變色

復制代碼代碼如下:

 
function changecolor(event) 
{ 

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

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

.選區隱藏與出現
代碼

復制代碼代碼如下:

 
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"; 
} 

.回調函數
代碼

復制代碼代碼如下:

 
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;/">關閉</a></span>"; 

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