现在才算是真正的完全制作完成，至于要不要设置一个延迟处理，或是其它更完善的功能，留给朋友们自己开动脑筋了，大家也可以在下面回复你的想法，等等。
客户端完整代码：
<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实现用户输入搜索内容时自动提示</title> </head> <body> <div> <input type="text" /> <input type="button" value="搜索" /> </div> <div></div> </body> </html> <script src="https://www.jb51.net/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>
服务器端完整php代码：
<?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:;">关闭</a& gt;</li>'; echo '</ul>'; ?>
非常实用的功能吧，而且对提升用户的体验度、友好度非常棒，小伙伴们可以结合本文，自由发挥下，加入到自己的项目中去.
您可能感兴趣的文章: