|
|
代碼
復制代碼 代碼如下:
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ù)
代碼
復制代碼 代碼如下:
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一般處理程序響應客戶端得請求，當然也可以用webserviece或者ASPx.cs或WCF來響應客戶端得請求，但是需要注意的是webservice響應客戶端必須遵循遵循soap協(xié)議（當然也可以通過修改配置文件讓webservice響應get或post請求），xxx.ashx和ASPx.cs響應客戶端要遵循h(huán)ttp協(xié)議。當然后臺也可以php或Java等。
.鼠標move變色
復制代碼 代碼如下:
function changecolor(event)
{
event.style.background="#00FFFF";
}
function changebackcolor(event)
{
event.style.background="#FFFFFF"
}
.選區(qū)隱藏與出現(xiàn)
代碼
復制代碼 代碼如下:
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ù)
代碼
復制代碼 代碼如下:
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();
}
}
}
}
這里我用的是json,當然也可以用XML或者字符串。
JavaScript技術(shù)：十分鐘打造AutoComplete自動完成效果代碼，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
