ajax+php+dom+json+mysql实现googl搜索的效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
002 <html xmlns="http://www.w3.org/1999/xhtml">
003 <head>
004 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
005 <title>ajax+php+dom+json+mysql实现googl搜索的效果</title>
006 <script language="javascript" type="text/javascript" src="../ajax/ajaxUtil.js"></script>
007 <style>
008 #inputStr{
009 width:300px;
010 }
011 #suggest{
012
013 width:305px;
014 position:absolute;
015 margin-left:85px;
016 overflow:auto;
017 }
018 #suggest.show{
019 border:1px solid #999;
020 }
021 #suggest.hidden{
022 border:none;
023 }
024 #suggest_ul{
025 list-style-type:none;
026 padding:0px;
027 margin:2px;
028 }
029
030 #suggest_ul li{
031 font-size:14px;
032 padding:5px;
033 }
034 /*设置移动到ul的li上的样式*/
035 #suggest_ul li.mouseOver{
036 background-color:#E7E7E7;
037 }
038 #suggest_ul li.mouseOut{
039 background-color:#FFF;
040 }
041 #suggest_ul li span{
042 background-color:#FFF;
043 float:right;
044 color:#0F0;
045 }
046
047 </style>
048 <script language="javascript" type="text/javascript">
049 function getSuggest(){
050 var url1="suggest-server.php";
051 var inputStr=$$("inputStr").value;
052 var params="wd="+encodeURI(inputStr);
053 //把用户输入的内容进行编码，并且船体到服务器端
054 //ajax请求
055 get(url1,params,processGetSuggest);
056 }
057 function processGetSuggest(xhr){
058 // alert(xhr.responseText);
059 //每次查询时都清空
060 clearSuggest();
061 var obj=eval("("+xhr.responseText+")");
062 //遍历
063 for(var i=0;i<obj.length;i++){
064 //创建文本节点
065 var text=document.createTextNode(obj[i].keywords);
066 //创建li元素节点
067 var count=document.createTextNode("约"+obj[i].count+"个结果");
068
069 var span=document.createElement("span");
070
071 span.appendChild(count);
072 var li=document.createElement("li");
073 li.appendChild(span);
074 li.appendChild(text);
075
076 //处理事件 mouserOver 和 onmouserOut
077 li.onmouseover=function (){
078 this.className="mouserOver";
079 }
080 li.onmouseout=function (){
081 this.className="mouserOut";
082
083 }
084 $$("suggest").className="show";
085 //当点击li的时候，把当前的文本赋值给输入框
086 li.onclick=function (){
087 //怎样把当前的li文本赋值给输入框
088 $$("inputStr").value=this.firstChild.nodeValue;
089 //本次提示完成，我们要
090 clearSuggest();
091 }
092
093
094 $$("suggest_ul").appendChild(li);
095 }
096
097 }
098 function clearSuggest(){
099 //移除提示的内容
100 var ul=$$("suggest_ul");
101 //获取ul的所有的子节点
102 var ulchild=ul.childNodes;
103
104 for(var i=ulchild.length-1;i>=0;i--){
105 //移除每一个子节点
106 // 父节点。 removeChild （子节点）
107 ulchild[i].parentNode.removeChild(ulchild[i]);
108 }
109 $$("suggest").className="hidden";
110 }
111 </script>
112 </head>
113
114 <body>
115 请输入内容:<input type="text" id="inputStr" onkeyup="getSuggest()"/>
116 <div id="suggest">
117 <ul id="suggest_ul">
118
119
120
121 </ul>
122 </div>
123 </body>
124 </html>
view sourceprint?01 <?php
02 header("Content-Type:text/html;charset=utf-8");
03 include "./include/dbconn.php";
04
05 //接受客户端传递进来的用户输入内容
06 $wd=$_GET['wd'];
07 if($wd!=""){
08
09 $wd=str_replace("[","[[]",$wd);
10 $wd=str_replace("&","[&]",$wd);
11 $wd=str_replace("%","[%]",$wd);
12 $wd=str_replace("^","[^]",$wd);
13
14
15
16
17 $sql="select * from suggest where keywords like '%".$wd."%' order by hits desc ";
18 $rs=mysql_query($sql);
19
20 //定义一个数组
21 $arr=array();
22 $i=0;
23 //定义查询并且把结果返回给rs
24 while($rows=mysql_fetch_assoc($rs)){
25 //遍历一个子查询，遍历每个关键词。在另一个表中出现的次数
26 $rs2=mysql_query("select count(*) from suggest1 where keywords
27 like '%".$rows['keywords']."%' ");
28 $r="select count (*) from suggest1 where keywords like'%".$rows['keywords']."%'";
29
30 //echo $r;
31 //$arr[]=$rows;
32 $arr[$i]['keywords']=$rows['keywords'];
33 $arr[$i]['count']=mysql_result($rs2,'0');
34 $i++;
35 }
36
37 echo json_encode($arr);
38 }
39 ?>
002 <html xmlns="http://www.w3.org/1999/xhtml">
003 <head>
004 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
005 <title>ajax+php+dom+json+mysql实现googl搜索的效果</title>
006 <script language="javascript" type="text/javascript" src="../ajax/ajaxUtil.js"></script>
007 <style>
008 #inputStr{
009 width:300px;
010 }
011 #suggest{
012
013 width:305px;
014 position:absolute;
015 margin-left:85px;
016 overflow:auto;
017 }
018 #suggest.show{
019 border:1px solid #999;
020 }
021 #suggest.hidden{
022 border:none;
023 }
024 #suggest_ul{
025 list-style-type:none;
026 padding:0px;
027 margin:2px;
028 }
029
030 #suggest_ul li{
031 font-size:14px;
032 padding:5px;
033 }
034 /*设置移动到ul的li上的样式*/
035 #suggest_ul li.mouseOver{
036 background-color:#E7E7E7;
037 }
038 #suggest_ul li.mouseOut{
039 background-color:#FFF;
040 }
041 #suggest_ul li span{
042 background-color:#FFF;
043 float:right;
044 color:#0F0;
045 }
046
047 </style>
048 <script language="javascript" type="text/javascript">
049 function getSuggest(){
050 var url1="suggest-server.php";
051 var inputStr=$$("inputStr").value;
052 var params="wd="+encodeURI(inputStr);
053 //把用户输入的内容进行编码，并且船体到服务器端
054 //ajax请求
055 get(url1,params,processGetSuggest);
056 }
057 function processGetSuggest(xhr){
058 // alert(xhr.responseText);
059 //每次查询时都清空
060 clearSuggest();
061 var obj=eval("("+xhr.responseText+")");
062 //遍历
063 for(var i=0;i<obj.length;i++){
064 //创建文本节点
065 var text=document.createTextNode(obj[i].keywords);
066 //创建li元素节点
067 var count=document.createTextNode("约"+obj[i].count+"个结果");
068
069 var span=document.createElement("span");
070
071 span.appendChild(count);
072 var li=document.createElement("li");
073 li.appendChild(span);
074 li.appendChild(text);
075
076 //处理事件 mouserOver 和 onmouserOut
077 li.onmouseover=function (){
078 this.className="mouserOver";
079 }
080 li.onmouseout=function (){
081 this.className="mouserOut";
082
083 }
084 $$("suggest").className="show";
085 //当点击li的时候，把当前的文本赋值给输入框
086 li.onclick=function (){
087 //怎样把当前的li文本赋值给输入框
088 $$("inputStr").value=this.firstChild.nodeValue;
089 //本次提示完成，我们要
090 clearSuggest();
091 }
092
093
094 $$("suggest_ul").appendChild(li);
095 }
096
097 }
098 function clearSuggest(){
099 //移除提示的内容
100 var ul=$$("suggest_ul");
101 //获取ul的所有的子节点
102 var ulchild=ul.childNodes;
103
104 for(var i=ulchild.length-1;i>=0;i--){
105 //移除每一个子节点
106 // 父节点。 removeChild （子节点）
107 ulchild[i].parentNode.removeChild(ulchild[i]);
108 }
109 $$("suggest").className="hidden";
110 }
111 </script>
112 </head>
113
114 <body>
115 请输入内容:<input type="text" id="inputStr" onkeyup="getSuggest()"/>
116 <div id="suggest">
117 <ul id="suggest_ul">
118
119
120
121 </ul>
122 </div>
123 </body>
124 </html>
view sourceprint?01 <?php
02 header("Content-Type:text/html;charset=utf-8");
03 include "./include/dbconn.php";
04
05 //接受客户端传递进来的用户输入内容
06 $wd=$_GET['wd'];
07 if($wd!=""){
08
09 $wd=str_replace("[","[[]",$wd);
10 $wd=str_replace("&","[&]",$wd);
11 $wd=str_replace("%","[%]",$wd);
12 $wd=str_replace("^","[^]",$wd);
13
14
15
16
17 $sql="select * from suggest where keywords like '%".$wd."%' order by hits desc ";
18 $rs=mysql_query($sql);
19
20 //定义一个数组
21 $arr=array();
22 $i=0;
23 //定义查询并且把结果返回给rs
24 while($rows=mysql_fetch_assoc($rs)){
25 //遍历一个子查询，遍历每个关键词。在另一个表中出现的次数
26 $rs2=mysql_query("select count(*) from suggest1 where keywords
27 like '%".$rows['keywords']."%' ");
28 $r="select count (*) from suggest1 where keywords like'%".$rows['keywords']."%'";
29
30 //echo $r;
31 //$arr[]=$rows;
32 $arr[$i]['keywords']=$rows['keywords'];
33 $arr[$i]['count']=mysql_result($rs2,'0');
34 $i++;
35 }
36
37 echo json_encode($arr);
38 }
39 ?>