Create AutoComplete automatic completion effect code in ten minutes_javascript skills

.Cliché--- ;
function createXmlHttpRequest()
{

if(window.ActiveXObject) { xmlHttp=new ActieveXObject("Microsoft.XMLHTTP"); } else if( window.XMLHttpRequest) { xmlHttp=new XMLHttpRequest();

}

}


If you don’t use Jquery to write javascript by hand, the above should be changed to XmlHttpRequest object pool, this I won’t write anymore.
. Trigger AutoComplete function
Code




Copy code


The code is as follows:

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);
}
}


The server background here is the xxx.ashx general handler under the .NET platform to respond to the client's request. Of course, you can also use webserviece or aspx.cs or WCF to respond to client requests, but it should be noted that the webservice response client must follow the soap protocol (of course, you can also modify the configuration file to let the webservice respond to get or post requests), xxx.ashx and aspx.cs Responding to the client must follow the http protocol. Of course, the backend can also be PHP or JAVA.
. Mouse move changes color




Copy code


The code is as follows:

function changecolor(event)
{

event.style.background="#00FFFF"; } function changebackcolor(event) { event.style.background=" #FFFFFF" }

. Selection hiding and appearance
Code




Copy code


The code is as follows:

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";
}


.Callback function
Code




Copy code


Code As follows:

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].bookCount "This book";

}
html = "Close";

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


Here I use The one is json, of course you can also use XML or string.