仿google智能提示效果

最新推荐文章于 2024-08-27 21:01:56 发布

honey_tao

最新推荐文章于 2024-08-27 21:01:56 发布

阅读量375

点赞数

文章标签： google function javascript mysql border xhtml

本文链接：https://blog.csdn.net/honey_th/article/details/7355415

版权

<!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+php+dom+json+mysql实现googl搜索的效果</title>
<script language="javascript" type="text/javascript" src="./include/ajaxUtil.js"></script>
<style>
#inputStr{
width:300px;
    }
#suggest{

width:305px;
position:absolute;
margin-left:85px;
overflow:auto;
}
#suggest.show{
border:1px solid #999;
   }
#suggest.hidden{
border:none;
}
#suggest_ul{
list-style-type:none;
padding:0px;
margin:2px;
   }

#suggest_ul li{
font-size:14px;
padding:5px;
}
/*设置移动到ul的li上的样式*/
#suggest_ul li.mouseOver{
background-color:#E7E7E7;
}
#suggest_ul li.mouseOut{
    background-color:#FFF;
}
#suggest_ul li span{
    background-color:#FFF;
float:right;
color:#0F0;
}

</style>
<script language="javascript" type="text/javascript">
/*
1、获取输入的内容
2、根据内容进行查询
3、把查询结果便利显示
4、创建一些元素节点，文本阶段，并且添加到ul中显示
4、添加li的时间
思考：重复加入问题
*/
function getSuggest(){
var url1="suggest-server.php";
var inputStr=$$("inputStr").value;
var params="wd="+encodeURI(inputStr);
//把用户输入的内容进行编码，并且船体到服务器端
//ajax请求
get(url1,params,processGetSuggest);
}
function processGetSuggest(xhr){
// alert(xhr.responseText);
//每次查询时都清空
      clearSuggest();
var obj=eval("("+xhr.responseText+")");
//遍历
for(var i=0;i<obj.length;i++){
//创建文本节点
var text=document.createTextNode(obj[i].keywords);
//创建li元素节点
var count=document.createTextNode("约"+obj[i].count+"个结果");

var span=document.createElement("span");

         span.appendChild(count);
   var li=document.createElement("li");
      li.appendChild(span);
      li.appendChild(text);

   //处理事件 mouserOver 和 onmouserOut
   li.οnmοuseοver=function (){
    this.className="mouserOver";
      }
   li.οnmοuseοut=function (){
    this.className="mouserOut";

     }
   $$("suggest").className="show";
//当点击li的时候，把当前的文本赋值给输入框
li.οnclick=function (){
   //怎样把当前的li文本赋值给输入框
   $$("inputStr").value=this.firstChild.nodeValue;
   //本次提示完成，我们要
    clearSuggest();
      }


$$("suggest_ul").appendChild(li);
}

}
function clearSuggest(){
//移除提示的内容
var ul=$$("suggest_ul");
//获取ul的所有的子节点
var ulchild=ul.childNodes;

for(var i=ulchild.length-1;i>=0;i--){
//移除每一个子节点
// 父节点。 removeChild （子节点）
ulchild[i].parentNode.removeChild(ulchild[i]);
}
$$("suggest").className="hidden";
}
</script>
</head>

<body>
仿google超强提示效果.<br>
请输入内容:<input type="text" id="inputStr" οnkeyup="getSuggest()"/>
<div id="suggest">
<ul id="suggest_ul">

</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=mysql_query($sql);

//定义一个数组
$arr=array();
$i=0;
//定义查询并且把结果返回给rs
while($rows=mysql_fetch_assoc($rs)){
//遍历一个子查询，遍历每个关键词。在另一个表中出现的次数
$rs2=mysql_query("select count(*) from suggest1 where keywords
like   '%".$rows['keywords']."%'    ");
$r="select count (*) from suggest1 where keywords like'%".$rows['keywords']."%'";

//echo $r;
    //$arr[]=$rows;
    $arr[$i]['keywords']=$rows['keywords'];
$arr[$i]['count']=mysql_result($rs2,'0');
$i++;
}

echo json_encode($arr);
}
?>

honey_tao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿google智能提示效果

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">ajax+php+dom+json+mysql实现googl搜索的效果#inputStr{width:300px; }#suggest{ width:305px;
复制链接

扫一扫