Php + ajax implement google search function 1 [original] _ PHP Tutorial

Source: Internet
Author: User
Php + ajax implement google search function 1 [original]. Original Works Original site: www.111cn.cn author: Noodle love rabbit QQ: 271728967 note: Reprint please indicate that the original www.111cn.cn is now under heavy snow in Changsha, there is nothing to go home at night //

Original works

Original site: www.111cn.cn

Author: Noodle love rabbit QQ: 271728967

Note: Reprint please explain the original out of http://www.111cn.cn

//

Now there is heavy snow in Changsha, and there is nothing to do when I go home at night. I wrote a BBS in the company during the day and completed a copy. suddenly yesterday I heard a netizen say that it would be nice to achieve the google effect, today, I was bored and thought about it. I thought it was nothing to do with ajax. I tried to write it. to tell the truth, I learned ajax for a short time and I only understood it, after reading this, don't lose the stone. let's lose your wallet. you have no money to use it during the Chinese New Year.) haha. well, I will not talk much about the topic below.

P in commit is not that simple. let's look at the code below.

Step 1: Create a data table: test

Create table 'test '(
'Id' int (4) not null auto_increment,
'Title' varchar (50) default NULL,
Primary key ('id ')
) ENGINE = InnoDB default charset = gb2312 AUTO_INCREMENT = 5;

After the data warehouse is successfully created, we will create the test.html file. This file is very simple. it is a form and a p and CSS file.

The above CSS is used to control the effect,






The content above is as follows.

Step 2: processing and calling of js and xmlhttp.

Create xmlhttp. I talked about this function last time when I talked about ajax + php imitating the window file manager. I also talked about it during user registration. I will not talk about it here. For the specific address, please go:

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 sugguest () function is used to obtain the key value and send it to the post file for processing, and 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 used to determine whether the xmlhttp status is equal to or not. 4 indicates that the sending is successful. In fact, another 200 indicates that the receiving is complete.

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 basic operations. I will not talk about them anymore,

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 part is the post. php file, followed by the next one.

Php + ajax implement google search function 2 [original]

Effect address: http://www.111cn.cn/test/test.html

Http://www.bkjia.com/PHPjc/631914.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/631914.htmlTechArticle// original works site Original: www.111cn.cn author: love rabbit noodles QQ: 271728967 note: Reprint please indicate that the original http://www.111cn.cn/now under the heavy snow in Changsha ah, go home at night there is nothing...

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.