js+ajax+dom+php+mysql实现goolgoal suggest 效果

最新推荐文章于 2024-09-24 09:50:23 发布

xi_weina

最新推荐文章于 2024-09-24 09:50:23 发布

阅读量1.6k

点赞数

文章标签： mysql ajax php function border sql

本文链接：https://blog.csdn.net/xi_weina/article/details/7339476

版权

//仿百度实现搜索引擎，我认为很重要，下面是我分享的代码，如有不对的地方请指教

<!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>goolgol suggest</title>
<style type="text/css">
/*设置input的样式*/
#inputStr{
    width:300px;
    }
    /*设置div的样式*/
#suggest{
    /*border:1px #0C0 solid;*/
    width:311px;
    position:absolute;
    overflow:auto;
    margin-left:85px;
        }
    /*设置ul的样式*/
#suggest_ul{
    list-style-type:none;
    padding:0px;
    margin:2px;
    }
    /*设置li的样式*/
#suggest_ul li{
        font-size:14px;
        padding:5px;
        margin:0px;
        }
        /*设置鼠标移上的样式*/
#suggest_ul li.mouseOver{
            
    background-color:#E7E7E7;
        }
            /*设置鼠标移走的样式*/
    #suggest_ul li.mouseOut{
            background-color:#FFF;
            }
    #suggest.show{
        border:#999 1px solid;
        }
    #suggest.hidden{
        border: none;
        }    
        #suggest_ul li span{
            float:right;
            color:#093;
            font-size:12px;
            font-weight:100;
            }
</style>
<script type="text/javascript" language="javascript" src="../three_secend/util.js"></script>
<script type="text/javascript" language="javascript">
/*
1、获取用户输入内容
2、根据内容进行查询
3、把查询结果遍历显示
创建一些元素节点，文本阶段，并且添加到ajax中
思考:重复加入的问题
*/
function getSuggest(){
    //定义url
    var url="suggest-server.php";
    //获取值
    var inputStr=$$("inputStr").value;
    //设置参数
    var params="wd="+encodeURI(inputStr);
    //ajax请求
    get(params,url,processGetSuggest);
}
    function processGetSuggest(xhr){
        //每次查询完都清空
        clearSuggest();
        //把服务器端返回的数据转化为对象
         //alert(xhr.responseText);
        var obj=eval("("+xhr.responseText+")");
        //alert(obj.length);
        //遍历查询结果
        for(var i=0;i<obj.length;i++){
            //创建文本节点
            //alert(obj[i].keywords);
            var text=document.createTextNode(obj[i].keywords);
            //创建搜索结果的值
            var count=document.createTextNode("约"+ obj[i].count +"个结果");
            //创建span标签
            var span=document.createElement("span");
            span.appendChild(count);
            //创建li元素节点
            var li=document.createElement("li");
            //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 (){
                    $$("inputStr").value=this.firstChild.nodeValue;
                  //本次提示完成删除本次提示结果
                    clearSuggest();
                    }
            $$("suggest_ul").appendChild(li);
            $$("suggest").className="show";
            }    
        }
    //移除提示内容
function clearSuggest(){
    //得到ul节点
    var ul=$$("suggest_ul");
    var ulchild=ul.childNodes;
    for(var i=ulchild.length-1;i>=0;i--){
        //移除每个子节点父节点 .子节点
        ulchild[i].parentNode.removeChild(ulchild[i]);
        }
    $$("suggest").className="hidden";
    }
</script>
</head>
<body>
请输入内容:<input type="text" οnkeyup="
getSuggest()" id="inputStr">
<div id="suggest">
<ul id="suggest_ul">
</ul>
</div>
</body>
</html>

//sugge-server.php
<?php
header("Content-Type:text/html;charset=utf-8");
include "conn.php";
$wd=$_GET["wd"];
//echo $wd;
//创建sql
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);
$arr=array();
$i=0;
while($rows=mysql_fetch_assoc($rs)){
    //做一个子查询，遍历每一个关键词在另一个表中出现的次数
$sql1="select count(*) from suggest1 where keywords like '%".$rows['keywords']."%'";
//echo $sql1;
    $rs2=mysql_query($sql1);
    $arr[$i]['keywords']=$rows['keywords'];
    $arr[$i]['count']=mysql_result($rs2,0);
    $i++;
}
    echo json_encode($arr);
    }
?>