Jquery + php enable the search box to automatically prompt _ jquery

Baidu has a very useful function, that is, users will automatically prompt the relevant search conditions for selection during the search, very user-friendly design, how can we put this function in our own project? After some research, we finally realized this function and shared it with everyone. Today, I suddenly want to create a search page for this site, so that users can find their favorite content by searching, which also avoids the trouble of manually searching resources in massive amounts of information, my goal is similar to that on the Baidu homepage. When you enter the text you want to search for, we will provide 10 pieces of information below, if the user is looking for one of the ten pieces of information, the page can be opened directly by clicking it. The main reason is to make the page more user-friendly, it makes it easier for users to use.

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!

Jquery + php Enables automatic prompt in the search box

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:

The Code is as follows:

View the page in a browser.
Jquery + php automatically prompts users to enter the search content
It looks very common and there are no styles. Now I want to adjust the styles.

The Code is as follows:

# Search {font-size: 14px ;}
# Search. k {padding: 2px 1px; width: 320px;}/* set the search box width to a greater value */

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.

Locating Method */
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.

The Code is as follows:

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

The Code is as follows:

$ ('# 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, therefore, clear and hide the content in the prompt box.
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.

The Code is as follows:

<? 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'

';
While ($ ro = mysql_fetch_array ($ re) echo'
• '. $ Ro [title].'
'; // Output the title of the result returned by the query, which should be noted in this place, because the text returned by ajax technology through jQuery is UTF-8 encoding, 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'
• Close'; // Enter a close button so that you can click Close when you do not want to see the prompt layer. The close button uses jQuery. To explain, the current button is $ (this ), locate the third parent element until it disappears.
  Echo'

';
?>

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.

The Code is as follows:

# 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:

The Code is as follows:

Jquery + php automatically prompts users to enter the search content