客户端完整代码：
<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 id="search"> <input type="text" name="k" class="k" /> <input type="button" name="s" value="搜索" /> </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>
服务器端完整代码：
<?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)">关闭</a& gt;</li>'; echo '</ul>'; ?>
