php+ajax 仿百度搜索效果

最新推荐文章于 2021-04-06 20:32:53 发布

aa1049372051

最新推荐文章于 2021-04-06 20:32:53 发布

阅读量6.1k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/aa1049372051/article/details/25687923

版权

javascript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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>";

?>

效果如下图

aa1049372051

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
php+ajax 仿百度搜索效果

php+ajax 仿百度搜索效果一共有四个文件 1.前台
复制链接

扫一扫

专栏目录

php+ajax 仿百度搜索效果

“相关推荐”对你有帮助么？