jquery mysql jsp搜索功能_实现搜索框自动提示功能（jquery+php）

客户端代码

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

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

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

});

});

});

服务器端代码

$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 '

οnclick="$(this).parent().parent().parent().fadeOut(100)">关闭

gt;

';

echo '

';

?>