php+ajax 仿百度搜索效果

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

效果如下图

php+ajax 仿百度搜索效果相关推荐

ajax仿百度搜索效果,利用autocomplete.js实现仿百度搜索效果（ajax动态获取后端[C#]数据）...
实现功能描述: 1.实现搜索框的智能提示 2.第二次浏览器缓存结果 3.实现仿百度搜索 * { margin: 0px; padding: 0px; } #wrapper { height: 100% ...
百度搜索效果（页面传来数据地址，由服务器去获取）
百度搜索效果(页面传来数据地址,由服务器去获取): <!DOCTYPE html> <html><head><meta charset="UTF-8 ...
仿百度搜索框–jQuery版本
仿百度搜索框–jQuery版本时维九月,序属三秋.此吾工作三个月之日,亦是吾重拾博客之时.一路坎坷走来,经历良多,收获甚多. 正题百度搜索框是企业开发中常用的一项功能,作为一个前端工作者,自然也是 ...
Ajax实现百度搜索框自动提示功能
Ajax实现百度搜索框自动提示功能当你在搜索框内写入关键字时下拉框会匹配和你输入的关键字相匹配的信息文章目录 Ajax实现百度搜索框自动提示功能一.实现效果二.代码实现 1.前端页面 2.后端 ...
百度ajax搜索,ajax实现百度搜索建议
function chooseIt(obj)//obj是用this传递过来的当前点击对象 { document.getElementById("search").value=obj ...
vue-resource使用 (vue仿百度搜索)
1.this.$http.get()方法 2.this.$http.post()方法 3.this.$http.jsonp()方法 (vue仿百度搜索) 在输入框中输入a, 然后在百度f12 ==&g ...
html+js仿百度搜索框，点击和回车跳转百度搜索
html+js仿百度搜索框,点击和回车跳转百度搜索代码 <!DOCTYPE html> <html lang="en"> <head>< ...
html搜索框下拉怎么做,一步一步教你实现仿百度搜索框下拉效果（上）
最终效果(chrome 下): 搜索框下拉 demo 今天就来简单讲解下如何做这样一个类似百度搜索框的下拉效果. 1.html 以及 css 部分首先你得要有个输入框,这里我用了控件,其次当用户 ...
AJAX实例--根据邮政编号动态获取省，市，县三级地区+仿百度搜索下拉提示
最近一段时间自己一直在学习AJAX,忽然顿悟ajax的强大功能,实在让人吃惊.在接下来的几篇博客里,我将分享在学习过程中,自己写的一些小例子,欢迎大家一起交流学习...欢迎各位拍砖..你的关注是我不断 ...

php+ajax 仿百度搜索效果

php+ajax 仿百度搜索效果相关推荐

最新文章

热门文章