ajax+js+dom+json+php+mysql 实现google suggest效果

最新推荐文章于 2024-07-24 23:35:30 发布

阿顿

最新推荐文章于 2024-07-24 23:35:30 发布

阅读量778

点赞数

文章标签： mysql google json ajax php function

本文链接：https://blog.csdn.net/dunyanan1/article/details/7336875

版权

suggest.html

<!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>ajax+js+dom+json+php+mysql 实现google suggest效果</title>
</head>
<style>
/*设文本框的样式*/
#inputStr{
      width:300px;
}
/*设置div的样式*/
#suggest{

      width:304px;
      position:absolute;
      margin-left:96px;
      overflow:auto; /*滚动条*/

}
   /*设置ul的样式*/
#suggest_ul{
      list-style-type:none;
      padding:0px;
      margin:0px;
}
   /*设置li的样式*/
#sugest_ul li{
      font-size:14px;
      padding:3px;
      }
      /*设置li span的样式*/
#suggest_ul li span{
      float:right;
      color:#690;
      font-size:12px;
      }

   /*设置鼠标移到ul的li上的样式*/
   #suggest_ul li.mouseOver{
       background-color:#999;
       }
   /*设置鼠标移开ul的li的样式*/
   #suggest_ul li.mouseOut{
       background-color:#FFF;
   }
   #suggest.show{
       /*显示边框*/
       border:1px solid #999;
   }
   #suggest.hide{
       /*隐藏边框*/
       border:none;
   }
</style>

<script language="javascript" type="text/javascript" src="../include/ajaxUtil.js"></script>
<script language="javascript" type="text/javascript" >
/*
1、获取用户输入的内容
2、根据内容查询
3、把查询结果便利查询
4、创建一些元素节点，文本节点，并且添加到ul中显示
5、添加li的事件

思考：重复加入的问题*/
function getSuggest(){
   var url="suggest-server.php";
   var inputStr=$$("inputStr").value;
   //alert(inputStr);
   //把用户输入的内容进行编码，并且传递到服务端
   var params ="wd="+encodeURI(inputStr);
   //ajax请求

   get(url,params,processGetSuggest);

}

function processGetSuggest(xhr){

   //alert(xhr.responseText);
      //将服务器端返回的数据转换为对象
      var obj=eval("("+xhr.responseText+")");
         //查询前先清空
       clearSuggest();

   // alert(obj);
      //遍历查询结果
      for( var i=0;i<obj.length;i++){

       //创建文本节点
       var text=document.createTextNode(obj[i].keywords);
       //创建搜索结果的span
       var span=document.createElement("span");
       //创建搜索结果的文本节点
       var count=document.createTextNode("约"+obj[i].counts+"个结果");

       //创建li元素节点
       var li=document.createElement("li");

       span.appendChild(count);


       //text追加到li
       li.appendChild(text);
       li.appendChild(span);

       //处理事件处理onmouseOver 和 onmouseOut
       li.οnmοuseοver=function(){
           this.className="mouseOver";
       }
       li.οnmοuseοut=function(){
           this.className="mouseOut";
       }
       //当点击li的时候，把当前的文本赋值给输入框
       li.οnclick=function(){
          //怎样把当前的li文本内容给文本框？
          $$("inputStr").value=this.firstChild.nodeValue;
       //本次提示完成后，清除所有内容
       clearSuggest();
       }


       $$("suggest_ul").appendChild(li);
      }
      $$("suggest").className="show";
}

//移除提示的内容
function clearSuggest(){

   var ul=$$("suggest_ul");
   //获取ul的所有的子节点
      var ulchilds=ul.childNodes;
      for(var i=ulchilds.length-1;i>=0;i--){
       //移除每一个子节点

       //    父节点.removeChild(子节点)
       ulchilds[i].parentNode.removeChild(ulchilds[i]);
      }
      $$("suggest").className="hide";
}

</script>
<body>
请输入内容：<input type="text" id="inputStr" οnkeyup="getSuggest()" />
<div id="suggest" >
   <ul id="suggest_ul">

   </ul>
</div>

</body>

</html>

suggest-server.php

<?php
header("Content-Type:text/html;charset=utf-8");
include "../include/dbConn.php";
//接受客户端传递来的用户输入的内容
$wd=$_GET['wd'];

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);
//echo $sql;
//定义一个数组
$arr=array();
$i=0;
while($rows=mysql_fetch_assoc($rs)){
      //做一个子查询，遍历每一个关键字，统计该关键字在另一个表中出现的次数
      $rs2=mysql_query("select count(*) from suggest1 where keywords like '%".$rows['keywords']."%'");

       $arr[$i]['keywords']=$rows['keywords'];

       $arr[$i]['counts']=mysql_result($rs2,0);
       $i++;
}
echo json_encode($arr);

}
?>

阿顿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax+js+dom+json+php+mysql 实现google suggest效果

suggest.htmlajax+js+dom+json+php+mysql 实现google suggest效果 /*设文本框的样式*/ #inputStr{ width:300px; } /*设置div的样式*/ #suggest{ width:304px; position:ab
复制链接

扫一扫