仿百度的智能提示功能

最新推荐文章于 2018-03-18 14:56:15 发布

HUMHSX

最新推荐文章于 2018-03-18 14:56:15 发布

阅读量1.4k

点赞数

文章标签：百度 function mysql javascript border xhtml

本文链接：https://blog.youkuaiyun.com/HUMHSX/article/details/7346926

版权

<!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="../ajax/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">
 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>
请输入内容:<input type="text" id="inputStr"   οnkeyup="getSuggest()"/>
<div id="suggest">
<ul id="suggest_ul">
 
 

</ul>
</div>
</body>
</html>
<?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);
}
?>