Use ajax+php to mimic Google function source

Source: Internet
Author: User
Tags key sql php file return setinterval

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



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.