本文介绍了一个基于用户输入内容的建议系统，通过AJAX技术实时查询并显示相关建议。
<style>
/*设文本框的样式*/
#inputStr{
width:300px;
}
/*设置div的样式*/
#suggest{
width:304px;
position:absolute;
margin-left:96px;
overflow:auto; /*滚动条*/
}
/*设置ul的样式*/
#suggest_ul{
list-style-type:none;
padding:0px;
margin:0px;
}
/*设置li的样式*/
#sugest_ul li{
font-size:14px;
padding:3px;
}
/*设置鼠标移到ul的li上的样式*/
#suggest_ul li.mouseOver{
background-color:#999;
}
/*设置鼠标移开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;
//alert(inputStr);
//把用户输入的内容进行编码，并且传递到服务端
var params ="wd="+encodeURI(inputStr);
//ajax请求
get(url,params,processGetSuggest);
}
function processGetSuggest(xhr){
// alert(xhr.responseText);
//将服务器端返回的数据转换为对象
var obj=eval("("+xhr.responseText+")");
// alert(obj);
//遍历查询结果
for( var i=0;i<obj.length;i++){
//创建文本节点
var text=document.createTextNode(obj[i].keywords);
//创建li元素节点
var li=document.createElement("li");
//text追加到li
li.appendChild(text);
//处理事件 处理onmouseOver 和 onmouseOut
li.onmouseover=function(){
this.className="mouseOver";
}
li.onmouseout=function(){
this.className="mouseOut";
}
//当点击li的时候，把当前的文本赋值给输入框
li.onclick=function(){
//怎样把当前的li文本内容给文本框？
$$("inputStr").value=this.firstChild.nodeValue;
//本次提示完成后，清除所有内容
clearSuggest();
}
$$("suggest_ul").appendChild(li);
}
$$("suggest").className="show";
}
//移除提示的内容
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>
<body>
请输入内容：<input type="text" id="inputStr" onkeyup="getSuggest()" />
<div id="suggest" >
<ul id="suggest_ul">
</ul>
</div>
</body>
<html>
扫一扫
7359
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
