Create AutoComplete's automatic completion effect code in ten minutes

.Classical talk---XmlHttpRequest
Code

Copy the codeThe code is as follows:

 
var xmlHttp; 
function createXmlHttpRequest() 
{ 
if() 
{ 
xmlHttp=new ActieveXObject(""); 
} 
else if() 
{ 
xmlHttp=new XMLHttpRequest(); 
} 
} 

If you don't use Jquery to write javascript, you need to change it to XmlHttpRequest object pool, so you won't write it.
.Trigger the AutoComplete function
Code

Copy the codeThe code is as follows:

 
function $E(argument) 
{ 
return (argument); 
} 

function GetInfo(e) 
{ 
var input=$E("Text1").value; 
if(<=0) 
{ 
changeDisplay(); 
} 
else 
{ 
createXmlHttpRequest(); 
var keyword=; 

=readyStateChangeHandle; 
var url="?keyword="+keyword+"&timeStamp="+new Date().getTime(); 
("GET",url,true); 
('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); 
(null); 
} 
} 

Here, the server background is a general handler under the .NET platform to respond to client requests. Of course, webservice or WCF can also be used to respond to client requests. However, it should be noted that the webservice response client must follow the soap protocol (of course, you can also make the webservice respond to get or post requests by modifying the configuration file), and the response client must follow the http protocol. Of course, the background can also be PHP or JAVA.
.Mouse move changes color

Copy the codeThe code is as follows:

 
function changecolor(event) 
{ 

="#00FFFF"; 

} 
function changebackcolor(event) 
{ 
="#FFFFFF" 
} 

.Selections are hidden and appear
Code

Copy the codeThe code is as follows:

 
function ChangeDivDisplay(e) 
{ 
("Text1").value=; 
var html=""; 
("searchResult").innerHTML=html; 
("searchResult").="hidden"; 
} 

function changeDisplay() 
{ 
var html=""; 
("searchResult").innerHTML=html; 
("searchResult").="hidden"; 
} 

.Callback function
Code

Copy the codeThe code is as follows:

 
function readyStateChangeHandle() 
{ 
if(==4) 
{ 
if(==200) 
{ 

if(!="]") 
{ 
var resultDiv=$E("searchResult"); 

var josnStr=eval('('++')'); 
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+"Book</span></span>";

} 
html+= "<span style=\" width: 195px; background-color: #FFFFFF; display: block;\"><a href=\"javascript:changeDisplay()\" style=\"float: right;\">Close</a></span>";

=html; 
("searchResult").="visible"; 
} 
else 
{ 
changeDisplay(); 
} 
} 
} 
} 

I'm using json here, and of course, XML or strings can also be used.