. Conventional discussion --- XmlHttpRequest
Code
Copy codeThe 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
Copy codeThe 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
Copy codeThe 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
Copy codeThe 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 codeThe 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 + = "<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> ";
}
Html + = "<span style = \" width: 195px; background-color: # FFFFFF; display: block; \ "> <a href = \" javascript: changeDisplay () \ "style = \" float: right; \ "> close </a> </span> ";
ResultDiv. innerHTML = html;
Document. getElementById ("searchResult"). style. visibility = "visible ";
}
Else
{
ChangeDisplay ();
}
}
}
}
Here I use json, and XML or string.