Create AutoComplete in 10 minutes and automatically complete the effect code _ javascript skills

Google AutoComplete is created in ten minutes. Because it is created in ten minutes, only the surface effect is taken into consideration. All others are ignored. . Conventional discussion --- XmlHttpRequest
Code

The Code is as follows:

Var xmlHttp;
Function createXmlHttpRequest ()
{
If (window. ActieveXObject)
{
XmlHttp = new ActieveXObject ("Microsoft. XMLHTTP ");
}
Else if (window. XMLHttpRequest)
{
XmlHttp = new XMLHttpRequest ();
}
}

If you do not need Jquery to write javascript manually, you need to change it to the XmlHttpRequest object pool.
. Trigger AutoComplete Function
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 );
}
}

Here the server is in the background.. NET platform. ashx generally processes requests sent by the client. 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 allow webservice to respond to get or post requests ), xxx. ashx and aspx. the cs response client must follow the http protocol. Of course, the backend can also be PHP or JAVA.
. Move the mouse to change color

The Code is as follows:

Function changecolor (event)
{

Event. style. background = "#00 FFFF ";

}
Function changebackcolor (event)
{
Event. style. background = "# FFFFFF"
}

. Hide and show selected area
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

The Code is 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]. bookName + "" + josnStr [key]. bookCount + "book ";

}
Html + = "close ";

ResultDiv. innerHTML = html;
Document. getElementById ("searchResult"). style. visibility = "visible ";
}
Else
{
ChangeDisplay ();
}
}
}
}

Here I use json, and XML or string.