首页 / 脚本样式 / JavaScript / 十分钟打造AutoComplete自动完成效果代码

.老生常谈---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（）;
}
}
}
}

这里我用的是json,当然也可以用XML或者字符串。