jquery+php Implementation search box automatically prompts _jquery

Today suddenly want to give this site to do a search page, so that users can search to find their favorite content, but also to avoid the vast amount of information in the manual to find the resources of the trouble, my goal and Baidu home effect similar, when the user input to search for the text, we give the relevant 10 information below, If the user is looking for the 10 information within a certain, so simple, direct click on the new page to open the page, the main thing is to be more humane, so that users more convenient to use.

First look at the effect of the picture bar, so more motivated, otherwise people do not know what I am talking about, in the end to achieve what kind of effect!

jquery+php implementation search box automatic prompt

Here are the main principles:

In the Search.html page, when the user enters "J" in the search box, use JavaScript to get the text content of the search box, find the relevant content in the database, and then use JavaScript to display the results returned by the server in the prompt box under the search box. For user reference selection.

The specific implementation method:

First in the page to do a search box, search button, display search hints layer, the following code

<div id= "Search" >
<input type= "text" Name= "K" class= "K"/> <input "button" type= "S" name= "searching"/ >
</div>
<div id= "Search_auto" ></div>

Using the browser to browse the page, you will see the effect of the following figure
jquery+php to implement user input search content automatically prompts
Looks ordinary, no style, now a little style adjustment

#search {font-size:14px;}
#search. k{padding:2px 1px; width:320px}//* Set the width of the search box to a large point * *

Then we'll adjust the layer style of the search hint, because the search tip layer is just below the search box, so we set it to be absolutely positioned.

Positioning Mode * *
Then use JS to place the search hint layer in the search box just below the width and the same search box, where we use jquery to solve

Copy Code code as follows:

$ (' #search_auto '). css ({' Width ': $ (' #search input[name= ' K '] '). Width () +4});

The location and width of the search hint layer has been determined, because this box is not displayed until the user has entered the search text, so we first want to set it to hidden, add display:none to the style of the hint layer and hide it.

All OK now, as long as the onkeyup of the search box to register the event, we still use jquery to deal with, in jquery is KeyUp

$ (' #search input[name= ' K '] '). KeyUp (function () {
$.post (' search_auto.php ', {' Value ': $ (this). Val ()},function ( Data {///Send post data to search_auto.php on the server, $.post is the jquery method
if (data== ' 0 ') $ (' #search_auto '). html ('). CSS ('　 Display ', ' none ');　 The data returned on the server, if equal to 0, is not found, so the contents of the prompt box are emptied and the
else $ (' #search_auto ') is hidden. HTML (data). CSS (' Display ', ' block '); If the data returned on the server is not equal to 0, the returned content is placed inside the prompt box and the prompt box is displayed
};

The above client is already ready to send the user input to the server and respond to the server's return value.
So how do the server side handle the data sent by the client, and then use PHP to give an example

<?php
$v =$_post[value];
$re =mysql_query ("SELECT * from test where title like '% $v% ' ORDER BY addtime desc limit 10");　 According to the data sent by the client, query the database for 10 related results
if (mysql_num_rows ($re) <=0) exit (' 0 '); To determine the results of the query, if there is no relevant results, then directly return 0
echo ' <ul> ';
while ($ro =mysql_fetch_array ($re)) echo ' <li><a href= ' ' > '. $ro [title]. '　 </a></li> '; The header output of the relevant results from the query, this place needs to be noted, because the text returned through jquery Ajax technology is UTF-8 encoded, so if $ro[title contains Chinese, be sure to remember to convert it to UTF-8 encoding using PHP iconv or other functions. , otherwise the page will be a string of garbled
echo ' <li class= cls ' ><a href= javascript:; "onclick=" $ (this). Parent (). Parent ().　 Parent (). fadeout (M) "> Close </a& gt;</li> '; Enter a close button, so that users do not want to see the hint layer can be clicked off, the Close button using jquery, explained that the current click button is $ (this), has been up to find its third parent element, let it gradually disappear
echo ' </ul> ';
? >

Now the server is ready to execute the data we sent past, and return the corresponding results, then now in the search box to enter a text test, but the premise is that your database has to be related to this text, or you can not see the prompt box appears, because there is no relevant content ah, hehe.

But still a little in the ointment, that is, the contents of the hint box is not beautiful, and we see in Baidu Search in the hint box compared to, is simply too ugly, haha, not urgent, we use CSS to adjust the effect of the display

Copy Code code as follows:

#search_auto li{background: #FFF; Text-align:left}//* Set the LI label effect inside the Prompt box * *
#search_auto Li.cls{text-align:right}/* Set the Close button effect inside the Prompt box/*
#search_auto Li A{display:block padding:5px 6px cursor:pointer color: #666;}/* Set a label effect under the Li label in the Prompt box * *
#search_auto Li A:hover{background: #D8D8D8; text-decoration:none; color: #000;}/* effect when the mouse is moved inside the cue box * *

Now is really the complete production, as to whether to set a delay processing, or other more complete functions, leaving friends to their own brains, you can also reply to your ideas below, and so on.
Client complete code:

Server-Side Complete PHP code:

<?php
$v =$_post[value];
$re =mysql_query ("SELECT * from test where title like '% $v% ' ORDER BY addtime desc limit");
if (mysql_num_rows ($re) <=0) exit (' 0 ');
Echo ' <ul> ';
while ($ro =mysql_fetch_array ($re)) echo ' <li><a href= ' ' > '. $ro [title]. ' </a></li> ';
Echo ' <li class= cls ' ><a href= ' javascript:; ' onclick= ' $ (this). Parent (). Parent (). fadeout (100) " > Close </a& gt;</li> ';
Echo ' </ul> ';
? >

Very practical functions, but also to enhance the user experience, friendliness is very good, small partners can combine this article, free to play, to join their own projects to go.