Use ajax+php to mimic Google function source

Mimic the effect of Google search bar features
The source code is as follows:

The following is a reference fragment: // Original works Original site: www.111cn.cn Author: noodles Love rabbit qq:271728967 NOTE: Reprint please explain the original out http://www.111cn.cn // Now there is a heavy snow in Changsha, evening home also nothing to do, the day in the company to write a BBS completed a part, suddenly yesterday to listen to a netizen said if you can achieve Google effect is good, today bored under the thought, think that this with Ajax do not what is it, try to write, To tell the truth I learn Ajax time is very short, also only understand the fur, you look after don't throw stone, the wallet throw over it, the New Year no money,;) hehe. All right, no more nonsense. Let's talk about the following. First of all, I have a general introduction, I only used two files, because it is testing so it is not so clear, the JS file and HTML written in a file test.html inside, there is a PHP file post.php, the file used to handle the number of Ajax sent over to deal with, Again by Ajax to return the data to the test.html inside the Div, the principle is not so simple, the following we look at the code. The first step is to create a datasheet: Test CREATE TABLE ' Test ' ( ' ID ' int (4) not NULL auto_increment, ' title ' varchar default NULL, PRIMARY KEY (' id ') ) Engine=innodb DEFAULT charset=gb2312 auto_increment=5; Okay, the database was created. We'll build the test.html file, which is very simple, a form and a div and CSS <style> <!-- body{font-size:12px;} #show {border:1px solid #9abcde; line-height:23px; width:200px; margin:0px;} #show Li{list-style:none;} #sug {margin:0px Auto;} --> </style> The above is used to control the effect of CSS, <table width= "border=" 0 "align=" center "cellpadding=" 0 "cellspacing=" 0 "> <form name= "Form1" method= "Post" action= "" ><tr> <td> <input name= "Key" type= "text" id= "key" onblur= "Losefouse" (); Size= "Autocomplete=off" > <input type= "Submit" name= "Submit" value= "111CN Search" > </td> </tr></form> <tr> <td><div id= "Sug" ></div></td> </tr> </table> This is the content, about the function we have below the specific description. The second step: JS and XMLHTTP processing and call. Create XMLHTTP, this function I said last time ajax+php imitate window File Manager, said, in the user registration also said, here is not to say, the specific address please: var xmlHttp = false; function Ajaxcreate () { try {xmlHttp = new ActiveXObject ("Msxml2.xmlhttp"); catch (e) { try {xmlHttp = new ActiveXObject ("Microsoft.XMLHTTP"); } catch (E2) { XmlHttp = false; } } if (!xmlhttp && typeof XMLHttpRequest!= \\\ ' undefined\\\ ') { XmlHttp = new XMLHttpRequest (); } if (!xmlhttp) {alert (\\\ ' Create xmlHttp Fail \\\ '); return false;} } The following function Sugguest () is to get the value of the key and send it to the post file for processing, then call the Returnstate () function function Sugguest () { Ajaxcreate (); var Xmvalue=document.getelementbyid ("Key"). Value; var url= "post.php?key=" +encodeuri (xmvalue) + "rnd=" +math.random (); if (xmvalue== null | | xmvalue.length>20 | | | xmvalue = "") return false; Xmlhttp.open ("POST", url,true); Xmlhttp.setrequestheader ("Content-type", "application/x-www-form-urlencoded"); Xmlhttp.send (Xmvalue); Xmlhttp.onreadystatechange=returnstate; } The following returnstate () function is to determine whether the state of XMLHTTP is equal to 4, 4 means to send success, in fact, a 200 to receive the finished function Returnstate () { if (xmlhttp.readystate!= 4) { document.getElementById ("Sug"). innerhtml= "Plase wait ..."; } if (xmlhttp.readystate = = 4) { document.getElementById ("Sug"). Innerhtml=xmlhttp.responsetext; } } The following functions are some of the basic processing I will not say, function Fillin (str) { document.getElementById (\\\ ' key\\\ '). Value=str; Obj =document.getelementbyid (\\\ ' sug\\\ '); obj.innerhtml=\\\ ' \\\ '; obj.style.display=\\\ ' none\\\ '; } function Other () { document.getElementById (\\\ ' sug\\\ '). style.display=\\\ ' block\\\ '; } function Losefouse () { SetInterval ("func ()", 4000); var time=setinterval ("func ()", 1000); Cleartimeout (time); } function func () { Ob=document.getelementbyid (\\\ ' sug\\\ '); Ob.style.display = \\\ ' none\\\ '; } The last one is the post.php file, and then the next article. Now to talk about post.php file, post.php file is very simple, this does not necessarily use PHP can use a lot, as long as the server foot can be completed, {personal comments} Header ("content-type:text/html;charset=gb2312"); I'm just saying that. Set the document encoding. $key =isset ($_post[' key '])? $_post[' key ': '; $sql = "Select title from test where title like '% $key% ' ORDER by title DESC"; $result =mysql_query ($sql) or Die (Mysql_error ()); echo "<div id=show >"; while ($rs =mysql_fetch_array ($result)) { echo "<li onmouseover=\" this.style.background= ' #d7ebff ' "onmouseout=\" this.style.background= ' #ffffff ' " Onclick=\ "Javascript:fillin (this.innerhtml);" > "$rs [' title ']." </li> "; } echo "</div>";