php+ajax 仿百度搜索效果(代码csdn下载地址:http://download.csdn.net/detail/aa1049372051/7338675)
一共有四个文件
1.前台页面 index.html
2.jquery.min.ji
3.前台ajax请求后他并返回数据 getdata.php
4.搜索结果处理文件 deal.php
前台页面 index.html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php ajax远程请求数据</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style>
/* CSS Document */
body{
color:#555;
}
#searchSuggest{
width:600px;
height:300px;
}
#suggest_input{
padding:0 0 0 5px ;
width:485px;
height:28px;
margin:0px;
font-size:14px;
}
#suggest_ul{
width:490px;
max-height:198px;
margin:0px;
padding:0px;
border:1px solid #ccc;
list-style-type:none;
}
#suggest_ul li{
padding-left:5px;
line-height:22px;
font-size:13px;
width:485px;
height:22px;
cursor:default;
}
#suggest_submit{
width:90px;
height:30px;
}
</style>
</head>
<body>
<div id="searchSuggest">
<form action="deal.php" method="get" id="suggest_form">
<input type="text" name="keywords" id="suggest_input" style="width:490px"/>
<input type="submit" value="搜索一下" id="suggest_submit" />
</form>
<ul id="suggest_ul">
</ul>
</div>
<script>
$('#suggest_input').keyup(function(e){
var keyword=$(this).val();
$("#suggest_ul").show()
if(keyword)
{
//发送ajax请求
$.ajax({
url: 'getdata.php',
data: {'keywords':keyword},
dataType: 'json',
type: 'POST',
success: function(res)
{
var contents="";
for(var i=0;i<res.length;i++){
var keywords = res[i].keywords;
contents=contents+"<li class='suggest_li"+(i+1)+"'>"+keywords+"</li>";
}
$("#suggest_ul").html(contents);
setInterval(changehover,300);
}
});
}
else
$("#suggest_ul").hide();
})
//鼠标移动下拉结果效果
function changehover(){
$("#suggest_ul li").hover(function(){
$(this).css("background","#eee");
$('#suggest_input').val($(this).html());
},function(){ $(this).css("background","#fff");});
$("#suggest_ul li").click(function(){ $("#suggest_form").submit();});
}
</script>
</body>
</html>
后台php文件代码
<?php
header("Content-type:text/html;charset=utf-8");
//连接数据库
$conn=mysql_connect("localhost","root","");
$sql=mysql_select_db("test");
mysql_query($sql,$conn);
mysql_query("set names utf8");
$keywords=$_POST['keywords'];
$sql = "select title from news where title like '".$keywords."%' order by id desc limit 0,9;";
$res = mysql_query($sql);
$mNums = mysql_num_rows($res);
$row=mysql_fetch_array($res);
$data=array();
if($mNums<1){
echo "no";
exit();
}else if($mNums==1){
$data[0]['keywords']=substr_ext($row['title'],0,14);
}else{
$data[0]['keywords']=substr_ext($row['title'],0,14);
while($row=mysql_fetch_array($res)){
$data[]['keywords']=substr_ext($row['title'],0,14);
}
}
echo json_encode($data);
mysql_free_result($res);
//截取中文字符防止出现乱码
function substr_ext($str, $start=0, $length, $charset="utf-8", $suffix="")
{
if(function_exists("mb_substr")){
return mb_substr($str, $start, $length, $charset).$suffix;
}
elseif(function_exists('iconv_substr')){
return iconv_substr($str,$start,$length,$charset).$suffix;
}
$re['utf-8'] = "/[\x01-\x7f]|[\xc2-\xdf][\x80-\xbf]|[\xe0-\xef][\x80-\xbf]{2}|[\xf0-\xff][\x80-\xbf]{3}/";
$re['gb2312'] = "/[\x01-\x7f]|[\xb0-\xf7][\xa0-\xfe]/";
$re['gbk'] = "/[\x01-\x7f]|[\x81-\xfe][\x40-\xfe]/";
$re['big5'] = "/[\x01-\x7f]|[\x81-\xfe]([\x40-\x7e]|\xa1-\xfe])/";
preg_match_all($re[$charset], $str, $match);
$slice = join("",array_slice($match[0], $start, $length));
return $slice.$suffix;
}
?>
deal.php处理文件
<?php
header("Content-type:text/html;charset=utf8");
$keywords = $_GET['keywords'];
echo "您本次搜索的关键词是:<b>".$keywords."</b>";
?>
效果如下图