实现google suggest效果

最新推荐文章于 2024-04-30 16:57:21 发布

WTT

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量506

点赞数

文章标签： google function javascript mysql border xhtml

本文链接：https://blog.csdn.net/w19911111/article/details/7336910

版权

先实现外表布局！注意：CSS部分要特别注意，要修饰清楚

<!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>

      #suggest_ul{
    list-style-type:none;
    padding:0px;
    margin:0px;}

      #suggest_ul li{

    font-size:14px;
    padding:3px;
    }

        #suggest_ul li.mouseOver{
   background-color:#E7E7E7;}

  #suggest_ul li.mouseOver{
   background-color:#FFF;}

   #suggest.show{
    border:1px solid #999;
    }
    #suggest.hide{
     border:none;}
</style>
<script language="javascript" type="text/javascript" src="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;

//把用户输入的内容进行编码，并且传递到服务器端

var params="wd="+encodeURI(inputStr);
//ajax请求
get(url,params,processGetSuggest);

}

function processGetSuggest(xhr){
//把服务器端返回的数据转换为对象

    var obj=eval("("+xhr.responseText+")");
    //本次提示完成，我们要删除提示结果
   clearSuggest();
//遍历查询结果
for(var i=0;i<obj.length;i++){

  //创建文本节点
  var text=document.createTextNode(obj[i].keywords);

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

  //text追加到li节点
  li.appendChild(text);
  //处理事件处理 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");
  //获取url的所有的子节点
  var ulchilds=ul.childNodes;

  for(var i=ulchilds.length-1;i>=0;i--)
  {
   //移除每一个子节点
   //父节点.removeChild(子节点)
   ulchilds[i].parentNode.removeChild(ulchilds[i]);


   }

  }

</script>
</head>

<body>
ajax+js+dom+json+php+mysql 实现google suggest效果 <br />

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

然后再用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";

//查询，并且把结果返回给$rs
$rs=mysql_query($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);

}
?>

WTT

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现google suggest效果

先实现外表布局！注意：CSS部分要特别注意，要修饰清楚 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">ajax+js+dom+json+php+mysql 实现google suggest效果 #inputStr{ w
复制链接

扫一扫