Php + jquery: Search prompt instance

Source: Internet
Author: User

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 at the results. 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:

The code is as follows: Copy code

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

Use a browser to browse the page and you will see the effect shown in the following figure.

 

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

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 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.

The code is as follows: Copy code

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

The code is as follows: Copy code

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: 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 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: Copy code

<? 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 & 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.
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.

The code is as follows: Copy code

# 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: Copy 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"/> & nbsp; <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:

The code is as follows: Copy 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 & gt; </li> ';
Echo '</ul> ';
?>


Method 2: Use the jquery. input_complete plug-in. This is very simple.

Example

The code is as follows: Copy code

<Link rel = "stylesheet" href = "/css/v2/jquery.input_complete.css" type = "text/css"/>
<Script src = "/js/v2/jquery. input_complete.js" type = "text/javascript"> </script>

<Script type = "text/javascript">
$ (Function (){
$ ("# Tt"). BigAutocomplete ({width: 176, data: [{title: "Yulong Mingju", result: "5993192" },{ title: "Hongwei Emerald City", result: "5993191" },{ title: "Haidian district wujiachang project", result: "5993190" },{ title: "Shijingshan liuniangfu C1C2 price-limited housing plot", result: "5993189 "}, {title: "Ocean Mi Cloud Block", result: "5993188" },{ title: "Liyuan town Brick Factory Village residence project", result: "5993187" },{ title: "Mapo Town New City No. 9", result: "5992450" },{ title: "Jingxi · Jintai Liwan", result: "5992449"}], callback: function (data ){
$ ("# S_loupan"). val (data. result );
    
}});
  
})
</Script>

As long as html is simple

The code is as follows: Copy code

<Input type = "text" id ="Tt"Class =" sel_quy "autocomplete =" off "/>

Note that the ID in must be TT,You can define your own name, and download the jquery. input_complete plug-in and jquery.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.