Php + ajax implement google search function 1 [original]

//

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.

The principle of the div in the rule 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 div and CSS.

<Style>
<! --
Body {font-size: 12px ;}
# Show {border: 1px solid #9 abcde; line-height: 23px; width: 200px; margin: 0px ;}
# Show li {list-style: none ;}
# Sug {margin: 0px auto ;}
-->
</Style>

The above CSS is used to control the effect,

<Table width = "400" border = "0" align = "center" cellpadding = "0" cellspacing = "0">
<Form name = "form1" method = "post" action = ""> <tr>
<Td>
<Input name = "key" type = "text" id = "key" onFocus = "other ();" onKeyDown = "sugguest ();" onBlur = "losefouse (); "size =" 27 "autocomplete = off>
<Input type = "submit" name = "Submit" value = "111cn search">
</Td>
</Tr> </form>
<Tr>
<Td> <div id = "sug" onClick = "javascript: func ();"> </div> </td>
</Tr>
</Table>

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