十分钟打造AutoComplete自动完成效果代码_javascript技巧-js教程-PHP中文網

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

WBOY

發布： 2016-05-16 18:37:58

原創

1322 人瀏覽過

.老生常谈---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{ 
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+= ""+josnStr[key].bookName +""+josnStr[key].bookCount+"本书";

}
html+= "关闭";

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

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