Php+jquery implementing the Search Hint feature _php tutorial

With Baidu or Google friends will find as long as we enter a word they smart to US hints related search engine, so I today because the work needs to do a function of this kind, below I collated two about jquery implementation user input Search content automatically prompt instance, hope to everyone helpful.

Today suddenly want to do a search page, so that users can search to find their favorite content, but also to avoid the trouble of manually finding resources in the vast amount of information, my goal and Baidu homepage effect similar, when the user input to search for text, we give the relevant 10 information below, If the user is looking for one of these 10 messages, then simple, directly click on the page can be opened in the new page, the main thing is to be more humane, so that users more convenient to use.

First look at it, so more motivated, otherwise we still do not know what I am talking about, in the end to achieve what effect!

Here are the main principles of the first explanation:

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

The specific implementation method:

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

The code is as follows	Copy Code

Use the browser to browse the page, you will see the effect

Look normal, no style, now a little bit of style adjustment

The code is as follows	Copy Code
#search {font-size:14px;} #search. k{padding:2px 1px; width:320px,}/* Set the search box width to a large point */

Then adjust the layer style that shows the search hint, because the search hint layer is just below the search box, so we set it to be positioned absolutely.

The code is as follows	Copy Code
#search_auto {border:1px solid #817FB2; Position:absolute}/* Set border, positioning method */

Then use JS to place the search cue layer is located directly below the search box, and the Width and search box is the same, here we use jquery to solve

The code is as follows	Copy Code
$ (' #search_auto '). css ({' Width ': $ (' #search input[name= "K"]). Width () +4});

The location and width of the search hint layer has been determined, because the user did not enter the search text before the box is not displayed, so we first set it to hide, in the cue layer style and add display:none to hide it.

Already all OK, now just give the search box onkeyup Register event, we still use jquery to deal with, in jquery is KeyUp

The code is as follows

Copy Code

$ (' #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 method of jquery if (data== ' 0 ') $ (' #search_auto '). html ('). CSS (' Display ', ' none '); Determining the data returned on the server, if equal to 0, means that no related content is found, so empty and hide the contents of the Cue box else $ (' #search_auto '). HTML (data). CSS (' Display ', ' block '); If the data returned on the server is not equal to 0, the returned content is placed in the prompt box and a prompt box is displayed }); });

The above client is already ready to send the user input to the server side and respond to the server's return value.

So how does the server handle the data sent by the client, using PHP as an example?

code as follows

copy code

"!--? 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 query result, if there is no relevant result, then directly return 0 Echo ' ';　 while ($ro =mysql_fetch_array ($re)) echo ' '. $ro [title]. ' '; Output the title of the related result of the query, this place needs to be noted, because the text returned by Ajax technology via jquery is UTF-8 encoded, so if $ro[title] contains Chinese, be sure to use PHP iconv or other functions to convert it to UTF-8 encoding　 , otherwise you'll see a string of garbled Echo ' close on the page; Enter a close button so that the user does not want to see the cue layer when you can click Close, the Close button with jquery, explaining that the current click of the button is $ (this), always up to find its third parent element, let it gradually disappear Echo ' '; ?

Now the server has been able to correctly execute the data we sent past, and return the corresponding results, then enter a text in the search box to test it, but the premise is that you have a database with this text-related content Ah, or you can not see the appearance of the cue box, because there is no relevant hint content ah, hehe.

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

The code is as follows

Copy Code

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

Now is the real complete production, as to whether to set up a delay, or other more perfect function, left to friends to open their brains, you can also reply to your ideas below, and so on.

Client complete code:

The code is as follows	Copy Code
jquery+php automatically prompt when users enter search content

Server-Side complete code:

The code is as follows	Copy Code
$v =$_post[value]; $re =mysql_query ("SELECT * from test where title like '% $v% ' ORDER BY addtime desc limit 10"); if (mysql_num_rows ($re) <=0) exit (' 0 '); Echo ' '; while ($ro =mysql_fetch_array ($re)) echo ' '. $ro [title]. ' '; Echo ' Close '; Echo ' '; ?>

Method two, using the Jquery.input_complete plugin, this is very simple

Cases

The code is as follows	Copy Code

HTML as long as the simple

The code is as follows	Copy Code

Note here in the ID must TT Oh, this you can define your own name, while Jquery.input_complete plug-ins and jquery everyone to download it yourself.

http://www.bkjia.com/PHPjc/632742.html www.bkjia.com true http://www.bkjia.com/PHPjc/632742.html techarticle with Baidu or Google friends will find as long as we enter a word they smart to US hints related search engine, so I today because the work need to do a function of this kind, next ...

