Php search box prompt (automatically completed) instance code

Baidu's search is in use. When users enter text, the search box automatically prompts related information to enhance the user experience, which is indeed good. How can this effect be achieved?

Let's take a look. This is more dynamic. Otherwise, you still don't know what I'm talking about and what kind of effect I want to achieve!

The following describes the principles:

On the search.html page, when you enter "j" in the search box, use javascript to retrieve the text content in the search box, search for the relevant content in the database, and return the content, then, use javascript to display the results returned by the server in the prompt box under the search box for your reference.

Specific implementation methods:

First, complete the search box, search button, and display the Search Prompt layer on the page, as shown in the following code:

<Div id = "search">
<Input type = "text" name = "k"/> <input type = "button" name = "s" value = "Search"/>
</Div>
<Div id = "search_auto"> </div>

View the page in a browser.

 

It looks very common and there are no styles. Now I want to adjust the styles.

# Search {font-size: 14px ;}
# Search. k {padding: 2px 1px; width: 320px;}/* set the search box width to a greater value. WEB Development notes (www.chhua.com )*/

Adjust the style of the layer that displays the Search Prompt. Because the Search Prompt layer is at the bottom of the search box, we set the positioning method to absolute positioning.

# Search_auto {border: 1px solid #817FB2; position: absolute;}/* set the border and positioning mode */

Then, use JS to place the position of the Search Prompt layer at the bottom of the search box, and the width is the same as that of the search box. Here we use jQuery to solve this problem.

Detail ('elasticsearch_auto'detail .css ({'width': $ ('# search input [name = "k"]'). width () + 4 });

The position and width of the Search Prompt layer have been determined. Because the prompt box is not displayed before you enter the search text, you must first hide it, add display: none in the style of the prompt layer to hide it.

Now we only need to register the event for the onkeyup in the search box. We still use jQuery to handle the event. In jQuery, The 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') Then ('{search_auto'{.html(''{.css ('display', 'None'); // determines the data returned on the server. if it is equal to 0, no relevant content is found, so clear the content of the prompt box and hide the WEB Development notes (www.chhua.com )*/
Else response ('{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 ready, and you can send user input to the server and respond to the server's return value.

 

So how does the server process the data sent by the client? The following uses PHP as an example.

<? Php
$ V = $ _ POST [value];
$ Re = mysql_query ("select * from test where title like '% $ v %' order by addtime desc limit 10"); // data sent from the client, query 10 related results in the database
If (mysql_num_rows ($ re) <= 0) exit ('0'); // judge the query result. if no relevant result exists, 0 is returned directly.
Echo '<ul> ';
While ($ ro = mysql_fetch_array ($ re) echo '<li> <a href = ""> '. $ ro [title]. '</a> </li>'; // output the title of the result returned by the query. Note that the text returned by jQuery ajax is UTF-8 encoded, so if $ ro [title] contains Chinese characters, remember to use PHP's iconv or other functions to convert it to UTF-8 encoding, otherwise you will see a garbled string on the page
Echo '<li> <a href = "javascript:;" onclick = "$ (this ). parent (). parent (). parent (). fadeOut (100) "> close </a & amp; gt; </li> '; // enter a close button so that you can click Close when you do not want to see the prompt layer, jQuery is used to close the button. The currently clicked button is $ (this), and the third parent element is found up until it disappears from WEB Development notes (www.chhua.com )*/
Echo '</ul> ';
?>

Now that the server can correctly execute the data we sent and return the corresponding results, enter a text in the search box to test it, the premise is that your database contains content related to this text. Otherwise, you cannot see the prompt box, because there is no relevant prompt content.

However, there are still some shortcomings, that is, the content in the prompt box is not beautiful. Compared with the prompt box we saw in Baidu search, it is really ugly. Haha, don't worry, we use css to adjust the display effect.

 

# Search_auto li {background: # FFF; text-align: left;}/* set the li label effect in the prompt box */
# Search_auto li. cls {text-align: right;}/* set the closing button effect in the prompt box */
# Search_auto li a {display: block; padding: 5px 6px; cursor: pointer; color: #666 ;}/ * set the effect of a label under the li label in the prompt box */
# Search_auto li a: hover {background: # D8D8D8; text-decoration: none; color: #000 ;}/ * Effects of moving the cursor into the prompt box */

Now it is truly complete. If you want to set a latency or other better functions, you can leave it to your friends. You can also reply to your thoughts below, and so on.

Complete client code:

<Html>
<Head>
<Style>
# Search {font-size: 14px ;}
# Search. k {padding: 2px 1px; width: 320px ;}
# Search_auto {border: 1px solid #817FB2; position: absolute; display: none ;}
# Search_auto li {background: # FFF; text-align: left ;}
# Search_auto li. cls {text-align: right ;}
# Search_auto li a {display: block; padding: 5px 6px; cursor: pointer; color: #666 ;}
# Search_auto li a: hover {background: # D8D8D8; text-decoration: none; color: #000 ;}
</Style>
<Title> jquery + php automatically prompts users when entering the search content </title>
</Head>

<Body>
<Div id = "search">
<Input type = "text" name = "k"/> <input type = "button" name = "s" value = "Search"/>
</Div>
<Div id = "search_auto"> </div>
</Body>
</Html>

<Script src = "jQuery. js"> </script>
<Script>
$ (Function (){

Detail ('elasticsearch_auto'detail .css ({'width': $ ('# search input [name = "k"]'). width () + 4 });
$ ('# Search input [name = "k"]'). keyup (function (){
$. Post ('search _ auto. php', {'value': $ (this). val ()}, function (data ){
If (data = '0') Then ('{search_auto'{.html({}.css ('display', 'None ');
Else upload ('elasticsearch_auto').html(data).css ('display', 'block ');
});
});

});
</Script>

Complete server code:

<? Php
$ 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 '<ul> ';
While ($ ro = mysql_fetch_array ($ re) echo '<li> <a href = ""> '. $ ro [title]. '</a> </li> ';
Echo '<li> <a href = "javascript:;" onclick = "$ (this ). parent (). parent (). parent (). fadeOut (100) "> close </a & amp; gt; </li> ';
Echo '</ul> ';
?>