php+jquery implementation of search prompt function example

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

代码如下

复制代码

Use the browser to browse the page, and you will see the effect as shown below

It looks very ordinary and has no style. Now let’s make some adjustments to the style

代码如下	复制代码
#search{font-size:14px;} #search .k{padding:2px 1px; width:320px;} /将搜索框宽度设置大点/

The code is as follows	Copy code
#search{font-size:14px;} #search .k{padding:2px 1px; width:320px;} /Set the search box width larger/

代码如下	复制代码
#search_auto{border:1px solid #817FB2; position:absolute;} /设置边框、定位方式/

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 method to absolute positioning

The code is as follows

Copy code

#search_auto{border:1px solid #817FB2; position:absolute;} /*Set the border and positioning method*/

代码如下	复制代码
$(‘#search_auto’).css({‘width’:$(‘#search input[name="k"]‘).width()+4});

Then use JS to place 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

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

代码如下

复制代码

$('#search input[name="k"]').keyup(function(){
$.post('search_auto.php',{'value':$(this).val()},function(data){　 //向服务器上的search_auto.php发送post数据，$.post是jQuery的方法
if(data=='0') $('#search_auto').html('').css('display','none');　 //判断服务器上返回的数据，如果等于０，则表示没有找到相关的内容，所以将提示框的内容清空并隐藏
else $('#search_auto').html(data).css('display','block');　 //如果服务器上返回的数据不等于０，则将返回的内容放到提示框内并显示提示框
});
});

$('#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 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
});
});

The above client has been completed and can send the 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? Let’s use PHP as an example

代码如下

复制代码

$v=$_POST[value];
$re=mysql_query("select * from test where title like '%$v%' order by addtime desc limit 10");　 //根据客户端发送来的数据，到数据库中查询10条相关的结果
if(mysql_num_rows($re)<=0) exit('0');　 //判断查询结果，如果没有相关的结果，那么直接返回0
echo '

'.$ro[title].'

关闭';　 //输入一个关闭按钮，让用户不想看到提示层时可以点击关闭，关闭按钮采用jQuery，解释一下，当前点击的按钮是$(this)，一直向上找到其第三个父元素，让它逐渐消失
echo '

';
?>

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"); //Query 10 related results in the database based on the data sent by the client
if(mysql_num_rows($re)<=0) exit('0'); //Judge the query result. If there is no relevant result, then return 0 directly
echo '

'.$ro[title].'

Close'; //Enter a close button so that users can click to close when they don’t want to see the prompt layer. The close button uses jQuery. To explain, the button currently clicked is $(this). Go all the way up to find the third one. parent element to make it disappear
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标签效果*/
#search_auto li.cls{text-align:right;} /*设置提示框内的关闭按钮效果*/
#search_auto li a{display:block; padding:5px 6px; cursor:pointer; color:#666;} /*设置提示框内li标签下的a标签效果*/
#search_auto li a:hover{background:#D8D8D8; text-decoration:none; color:#000;} /*当鼠标移入提示框内时的效果*/

But there is still a slight flaw, that is, the content in the prompt box is not beautiful. Compared with the prompt box we saw in Baidu search, it is simply too ugly. Haha, don’t worry, we will use css to adjust the display. The effect of

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

代码如下

复制代码

jquery+php实现用户输入搜索内容时自动提示

jquery+php implements automatic prompts when users enter search content

Complete server-side code:

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 ' '.$ro[title].' '; echo ' Close'; echo ' '; ?>

Method 2, use the jquery.input_complete plug-in, this is very simple

Example

The code is as follows

代码如下

复制代码

Copy code

代码如下	复制代码
tt" class="sel_quy" autocomplete="off" />

Just simple html

The code is as follows

Copy code

Note that the ID here must be TT. You can define the name yourself. At the same time, you can download the jquery.input_complete plug-in and jquery yourself. http://www.bkjia.com/PHPjc/632742.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/632742.htmlTechArticleFriends who use Baidu or Google will find that as long as we enter a word, they will intelligently prompt us with relevant search engines, so I have to do this type of function today because of work needs, next time...

Related labels：

google one Function Discover Example accomplish us hint search friend use Baidu of enter

source：php.cn

Previous article：PHP determines whether the user's browser has the Alexa toolbar program installed_PHP tutorial Next article：ajax+php no refresh post and registration verification example_PHP tutorial

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

php+jquery implementation of search prompt function example_PHP tutorial