您的位置：首页 > 编程语言 > PHP开发
js+ajax+dom+php+mysql实现goolgoal suggest 效果

2012-03-10 12:27 856 查看
//仿百度实现搜索引擎，我认为很重要，下面是我分享的代码，如有不对的地方请指教

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>goolgol suggest</title>
<style type="text/css">
/*设置input的样式*/
#inputStr{
width:300px;
}
/*设置div的样式*/
#suggest{
/*border:1px #0C0 solid;*/
width:311px;
position:absolute;
overflow:auto;
margin-left:85px;
}
/*设置ul的样式*/
#suggest_ul{
list-style-type:none;
padding:0px;
margin:2px;
}
/*设置li的样式*/
#suggest_ul li{
font-size:14px;
padding:5px;
margin:0px;
}
/*设置鼠标移上的样式*/
#suggest_ul li.mouseOver{

background-color:#E7E7E7;
}
/*设置鼠标移走的样式*/
#suggest_ul li.mouseOut{
background-color:#FFF;
}
#suggest.show{
border:#999 1px solid;
}
#suggest.hidden{
border: none;
}
#suggest_ul li span{
float:right;
color:#093;
font-size:12px;
font-weight:100;
}
</style>
<script type="text/javascript" language="javascript" src="../three_secend/util.js"></script>
<script type="text/javascript" language="javascript">
/*
1、获取用户输入内容
2、根据内容进行查询
3、把查询结果遍历显示
创建一些元素节点，文本阶段，并且添加到ajax中
思考:重复加入的问题
*/
function getSuggest(){
//定义url
var url="suggest-server.php";
//获取值
var inputStr=$$("inputStr").value;
//设置参数
var params="wd="+encodeURI(inputStr);
//ajax请求
get(params,url,processGetSuggest);
}
function processGetSuggest(xhr){
//每次查询完都清空
clearSuggest();
//把服务器端返回的数据转化为对象
//alert(xhr.responseText);
var obj=eval("("+xhr.responseText+")");
//alert(obj.length);
//遍历查询结果
for(var i=0;i<obj.length;i++){
//创建文本节点
//alert(obj[i].keywords);
var text=document.createTextNode(obj[i].keywords);
//创建搜索结果的值
var count=document.createTextNode("约"+ obj[i].count +"个结果");
//创建span标签
var span=document.createElement("span");
span.appendChild(count);
//创建li元素节点
var li=document.createElement("li");
//text追加到li
li.appendChild(text);
li.appendChild(span);
//处理事件 处理 onmouseOver和onmouseOut
li.onmouseover=function(){
this.className="mouseOver";
}
li.onmouseout=function(){
this.className="mouseOut";
}
//当点击li的时候，把当前的文本赋值给输入框
li.onclick=function (){
$$("inputStr").value=this.firstChild.nodeValue;
//本次提示完成删除本次提示结果
clearSuggest();
}
$$("suggest_ul").appendChild(li);
$$("suggest").className="show";
}
}
//移除提示内容
function clearSuggest(){
//得到ul节点
var ul=$$("suggest_ul");
var ulchild=ul.childNodes;
for(var i=ulchild.length-1;i>=0;i--){
//移除每个子节点父节点 .子节点
ulchild[i].parentNode.removeChild(ulchild[i]);
}
$$("suggest").className="hidden";
}
</script>
</head>
<body>
请输入内容:<input type="text" onkeyup="
getSuggest()" id="inputStr">
<div id="suggest">
<ul id="suggest_ul">
</ul>
</div>
</body>
</html>

//sugge-server.php
<?php
header("Content-Type:text/html;charset=utf-8");
include "conn.php";
$wd=$_GET["wd"];
//echo $wd;
//创建sql
if($wd!=''){
//过滤关键字
$wd=str_replace("[","[[]",$wd);
$wd=str_replace("&","[&]",$wd);
$wd=str_replace("%","[%]",$wd);
$wd=str_replace("^","[^]",$wd);

$sql="select * from suggest where keywords like '%".$wd."%' order by hits desc";
//echo $sql;
//查询并将结果集返回给rs
$rs=mysql_query($sql);
$arr=array();
$i=0;
while($rows=mysql_fetch_assoc($rs)){
//做一个子查询，遍历每一个关键词在另一个表中出现的次数
$sql1="select count(*) from suggest1 where keywords like '%".$rows['keywords']."%'";
//echo $sql1;
$rs2=mysql_query($sql1);
$arr[$i]['keywords']=$rows['keywords'];
$arr[$i]['count']=mysql_result($rs2,0);
$i++;
}
echo json_encode($arr);
}
?>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航