Home >Backend Development >PHP Tutorial >php+jquery implementation of search prompt function example_PHP tutorial
Friends who use Baidu or Google will find that as long as we enter a word, they will intelligently prompt us with relevant search engines. In this way, I have to do this type of function today because of work needs. Below I have compiled two jquery implementations Examples are automatically prompted when users enter search content. I hope it will be helpful to everyone.
Today I suddenly want to build a search page for this site, so that users can find their favorite content through search, and avoid the trouble of manually finding resources in massive information. My goal is similar to the effect of Baidu homepage. When the user enters the text they want to search for, we provide ten relevant pieces of information below. If the user is looking for one of these ten pieces of information, it is simple. Just click to open the page in a new page. The main reason is to update the page. Make it more user-friendly and make it more convenient for users to use.
Let’s take a look at the renderings first. This will give you more motivation, otherwise you won’t know what I’m talking about and what effect I want to achieve!
The following mainly explains the principle:
In the search.html page, when the user enters "j" in the search box, use javascript to obtain the text content of the search box, search for relevant content in the database and return it, and then use javascript to display the results returned by the server in The prompt box below the search box is for users to make reference choices.
Specific implementation method:
First, create a search box, search button, and search prompt layer on the page, as shown in the following code
The code is as follows | Copy code | ||||
|
It looks very ordinary and has no style. Now let’s make some adjustments to the style
代码如下 | 复制代码 |
#search{font-size:14px;} |
The code is as follows | Copy code |
#search{font-size:14px;} |
代码如下 | 复制代码 |
#search_auto{border:1px solid #817FB2; position:absolute;} /*设置边框、定位方式*/ |
The code is as follows | Copy code | ||||
#search_auto{border:1px solid #817FB2; position:absolute;} /*Set the border and positioning method*/
|
The code is as follows | Copy code |
$(‘#search_auto’).css({‘width’:$(‘#search input[name="k"]‘).width()+4}); |
The position and width of the search prompt layer have been determined. Since the prompt box will not be displayed before the user enters the search text, we first need to set it to hidden and add display to the style of the prompt layer: none hides it.
Everything is OK. Now we only need to register the event for the onkeyup of the search box. We still use jQuery to handle it. In jQuery, it is keyup
The code is as follows | Copy code | ||||
$.post('search_auto.php',{'value':$(this).val()},function(data){ //Send post data to search_auto.php on the server, $.post is a jQuery method if(data=='0') $('#search_auto').html('').css('display','none'); //Judge the data returned on the server. If it is equal to 0, it means there is none Relevant content is found, so clear and hide the content of the prompt box else $('#search_auto').html(data).css('display','block'); //If the data returned on the server is not equal to 0, put the returned content into the prompt box and display the prompt Box }); });
|
So how does the server process the data sent by the client? Let’s use PHP as an example
代码如下 | 复制代码 |
$v=$_POST[value];
while($ro=mysql_fetch_array($re)) echo ' echo ' ?> |
The code is as follows | Copy code |
$v=$_POST[value];
while($ro=mysql_fetch_array($re)) echo ' echo ' ?> |
Now the server can correctly execute the data we sent and return the corresponding results. Now enter a text in the search box to test it, but the premise is that there must be something related to this text in your database. content, otherwise you wouldn’t see the prompt box appear because there is no relevant prompt content, haha.
代码如下 | 复制代码 |
#search_auto li{background:#FFF; text-align:left;} /*设置提示框内的li标签效果*/ |
The code is as follows | Copy code |
#search_auto li{background:#FFF; text-align:left;} /*Set the li tag effect in the prompt 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 label in the prompt box*/ #search_auto li a:hover{background:#D8D8D8; text-decoration:none; color:#000;} /*The effect when the mouse moves into the prompt box*/ |
Now it is truly fully completed. As for whether to set up a delay processing or other more complete functions, it is left to friends to use their own brains. You can also reply to your thoughts below, etc.
Complete client code:
The code is as follows | Copy code | ||||
<script><br> $(function(){<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy1419')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id="copy1419"> <p><?php<br /> $v=$_POST[value];<br /> $re=mysql_query("select * from test where title like '%$v%' order by addtime desc limit 10");<br /> if(mysql_num_rows($re)<=0) exit('0');<br /> echo '<ul>';<br> while($ro=mysql_fetch_array($re)) echo '<li><a href="">'.$ro[title].'</a></li>';<br> echo '<li><a href="javascript:;" onclick="$(this).parent().parent().parent().fadeOut(100)">关闭</a& gt;</li>';<br> echo '</ul>';<br> ?></p> </td> </tr> </table> $('#search_auto').css({'width':$('#search input[name="k"]').width()+4});<br> $('#search input[name="k"]').keyup(function(){<br> $.post('search_auto.php',{'value':$(this).val()},function(data){<br> if(data=='0') $('#search_auto').html('').css('display','none');<br> else $('#search_auto').html(data).css('display','block');<br> });<br> }); });<br> </script> |
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 ' echo ' ?> |
Method 2, use the jquery.input_complete plug-in, this is very simple
Example
The code is as follows
|
Copy code
|
||||
$(function(){ |
$("