js+ajax+dom+php+mysql实现goolgoal suggest 效果
来源：互联网 发布：西门子工控机如何编程 编辑：程序博客网 时间：2024/04/30 14:38
//仿百度实现搜索引擎，我认为很重要，下面是我分享的代码，如有不对的地方请指教<!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<?phpheader("Content-Type:text/html;charset=utf-8");include "conn.php";$wd=$_GET["wd"];//echo $wd;//创建sqlif($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); }?>
