十分钟打造AutoComplete自动完成效果代码

159 阅读 0 评论 105 点赞

我是靠谱客的博主单纯乌冬面，最近开发中收集的这篇文章主要介绍十分钟打造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(); 
} 
} 
} 
} 