Jquery + PHP search box automatically prompt

  • 2020-03-30 04:24:42
  • OfStack

Today suddenly want to give this site to make a search page, so that users can search to find their own content, also avoid the trouble of manually locate in the mass information resources, the effect of my goals and baidu home page, when a user to enter search words, we provide below information, if the user is looking for these ten information inside a bar, so simple, just click to open the page in the new page, main is to want a little more human, let users more convenient to use.

First look at the effect picture, this is more dynamic, otherwise you do not know what I am talking about, in the end to achieve what kind of effect!

Jquery + PHP search box automatically prompt

The following is the main explanation of the principle:

In the search.html page, when the user enters "j" in the search box, he USES javascript to obtain the text content of the search box, searches the relevant content in the database and returns it. Then he USES javascript to display the results returned by the server in the prompt box below the search box for the user's reference and selection.

Specific implementation method:

First, do a good job in the page search box, search button, show the search prompt layer, as follows


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

If you browse the page with a browser, you will see the following image
Jquery + PHP to enable users to enter search content automatically prompt
It looks normal, it doesn't have a lot of style, now just a little bit of style, okay


#search{font-size:14px;}
#search .k{padding:2px 1px; width:320px;} 

Adjust the style of the layer that displays the search prompt. Since the search prompt layer is directly below the search box, we set its positioning mode as absolute positioning

Positioning mode */
Then, JS is used to place the location of the search prompt layer directly below the search box, and the width is the same as the search box, here we use jQuery to solve the problem


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

The location and width of the search prompt layer have been determined. Since the prompt box will not be displayed until the user enters the search text, we will first set it to be hidden by adding display:none to the style of the prompt layer to hide it.

All right, now we just need to register the onkeyup event in the search box. We still use jQuery, which is keyup


$('#search input[name="k"]').keyup(function(){
$.post('search_auto.php',{'value':$(this).val()},function(data){  //Post data is sent to search_auto-php on the server. $.post is jQuery's method
if(data=='0') $('#search_auto').html('').css('display','none');  //Determine that the data returned on the server, if equal to 0, it means that the relevant content was not found, so the contents of the prompt box empty and hide
else $('#search_auto').html(data).css('display','block');  //If the data returned on the server does not equal 0, place the returned content in the prompt box and display the prompt box
});
});

The client is ready to send the user's input to the server 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


<?php
$v=$_POST[value];
$re=mysql_query("select * from test where title like '%$v%' order by addtime desc limit 10");  //Query the database for 10 related results based on the data sent by the client
if(mysql_num_rows($re)<=0) exit('0');  //Judge the result of the query, and return 0 if there are no related results
echo '<ul>';
while($ro=mysql_fetch_array($re)) echo '<li><a href="">'.$ro[title].'</a></li>';  //It is important to note that the text returned through jQuery's ajax technique is utf-8 encoded, so if the $ro[title] contains Chinese, be sure to use PHP's iconv or some other function to convert it to utf-8 encoded, otherwise you will see a string of gargoyns on the page
echo '<li class="cls"><a href="javascript:;" onclick="$(this).parent().parent().parent().fadeOut(100)"> Shut down </a& gt;</li>';  //Enter a close button, so that users do not want to see the prompt layer can click to close, close the button using jQuery, explain that the button is currently clicked $(this), up to find its third parent element, let it gradually disappear
echo '</ul>';
?>

Now the server can correct execution we send the past data, and returns the corresponding results, now in the search box to enter a written test, but the premise is must have in your database related to the text content, or you also can't see the prompt dialog box appears, because there is no relevant prompt content ah, ha ha.

But there is a little fly in the ointment, that is the prompt box inside the content is not beautiful, and we see the prompt box in baidu search, it is simply too ugly, haha, not urgent, we use CSS to adjust the effect of the display


#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;}

Now that it's fully finished, I'll leave it to my friends to decide whether to set up a delay or some other feature, and they can reply with their thoughts below.
Client complete 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 Realize the user to enter the search content automatically prompt </title>
</head>
<body>
<div id="search">
<input type="text" name="k" class="k" /> <input type="button" name="s" value=" search " />
</div>
<div id="search_auto"></div>
</body>
</html>
<script src="jQuery.js"></script>
<script>
$(function(){
$('#search_auto').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') $('#search_auto').html('').css('display','none');
else $('#search_auto').html(data).css('display','block');
});
});
});
</script>

Server-side complete PHP 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 class="cls"><a href="javascript:;" onclick="$(this).parent().parent().parent().fadeOut(100)"> Shut down </a& gt;</li>';
echo '</ul>';
?>

Related articles: