10 minutes to build AutoComplete automatic completion of the effect code _JAVASCRIPT skills

. Commonplace---XMLHttpRequest
Code

Copy Code code 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 use jquery handwriting JavaScript, you should change it to a XMLHttpRequest object pool, which is not written.
-Trigger AutoComplete function
Code

Copy Code code 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 background is in the. NET platform, the XXX.ASHX general handler responds to client requests, and can, of course, respond to client requests with webserviece or Aspx.cs or WCF, but it should be noted that WebService response client must follow the SOAP protocol (and, of course, by modifying the configuration file to let W Ebservice responds to a GET or POST request, XXX.ASHX and Aspx.cs respond to the client to follow the HTTP protocol. Of course, the background can also PHP or Java and so on.
. Mouse Move Discoloration

Copy Code code as follows:

function ChangeColor (event)
{

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

}
function Changebackcolor (event)
{
Event.style.background= "#FFFFFF"
}

. Selection concealment and appearance
Code

Copy Code code 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 Functions
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+= "<span onmousemove=\" ChangeColor (this) \ onclick=\ changedivdisplay (this) \ Onmouseout=\ (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;\" > Off </a></span > ";

resultdiv.innerhtml=html;
document.getElementById ("SearchResult"). style.visibility= "Visible";
}
Else
{
Changedisplay ();
}
}
}
}

I'm using JSON here, and of course I can use XML or string.