ajax+js+dom+json+php+mysql 实现google suggest效果-优快云博客

本文链接：https://blog.youkuaiyun.com/youngerhao/article/details/7337027

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

<style>
/*设置文本框的样式*/
#inputStr{
width:300px;
}

/*设置DIV的样式*/
#suggest{

width:302px;
position:absolute;
margin-left:96px;
overflow:auto;
}
/*设置UL的样式*/
#suggest_ul{
list-style-type:none;
padding:0px;
margin:0px;
}
/*设置每个li的样式*/
#suggest_ul li{
font-size:14px;
padding:3px;
}

/*设置每个li的样式*/
#suggest_ul li span{
float:right;
color:#690;
font-size:12px;
}

/*设置移动到ul的li上的样式*/
#suggest_ul li.mouseOver{
background-color:#E7E7E7;}

/*设置移动到ul的li上的样式*/
#suggest_ul li.mouseOut{
background-color:#FFF;}

#suggest.show{
/* 显示提示框的边框 */
border:1px solid #999;
}
#suggest.hide{
/* 隐藏提示框的边框 */
border:none;
}

</style>

<script language="javascript" type="text/javascript" src="../../include/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){
//每次查询前，都清空
clearSuggest();

//把服务器端返回的数据转换为对象
var obj=eval("("+xhr.responseText+")");

//遍历查询结果
for(var i=0;i<obj.length;i++){

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

//创建搜索结果的的文本节点
var count=document.createTextNode("约"+obj[i].counts+"个结果");
//创建搜索结果的的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 (){

//怎么样把当前的li的文本内容给文本框？
$$("inputStr").value=this.firstChild.nodeValue;

//本次提示完成，我们要删除提示结果
clearSuggest();
}

//显示边框
$$("suggest").className="show";
$$("suggest_ul").appendChild(li);
}

}

//移除提示的内容
function clearSuggest(){

var ul=$$("suggest_ul");
//获取ul的所有的子节点
var ulchilds=ul.childNodes;

for(var i=ulchilds.length-1;i>=0;i--){

//移除每一个子节点
// 父节点.removeChild(子节点)
ulchilds[i].parentNode.removeChild(ulchilds[i]);
}

$$("suggest").className="hide";
}

</script>
</head>

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

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

</ul>
</div>
</body>
</html>

这里我只写出的客户端的代码部分，如果大家还不懂的话，可以点击链接进行下载：http://download.youkuaiyun.com/download/youngerhao/4126560希望这代码能帮到大家解决一些问题，有什么问题，可以给我留言，我会帮您解决