十分鐘打造AutoComplete自動完成效果代碼
2024-05-06 14:12:07
供稿：網友
.老生常談---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>";
