自己手写的仿百度自动补全功能

1。 jsp页面

<input id="word" onblur="hideAuto()" onkeyup="autoCompleteName()" type="text">

<div id="auto" style="width: 134px;z-index: 100;
position: absolute;background-color: white;display: none;
border-width: 1px;border-color: gray;border-style: solid;
margin-left: -136px;margin-top: 22px;
height: 108px;overflow: hidden;">
<table border="0" cellpadding="0" cellspacing="2" id="bookNameTable">
<tr>
<td>&nbsp;</td>
</tr>
</table>
</div>

input框 当键盘松开 触发自动补全javascript. 当input失去焦点 调用隐藏层javascript

2。自动补全的javascript

var bookName = $("#word").val(); //获得input表单的值
$("#bookNameTable").empty(); //让DIV里面的table清空
if(bookName==""){ //如果表单为空 隐藏层 并return掉
$("#auto").hide();
return false;
}
$.ajax //调用ajax方法
({
type:'post',
dataType:'text',
url:'bookAction!getBookNameAjax.action?bookName='+encodeURI(encodeURI(bookName)),
success:function (rst) //上面的name可以是中文 所以需要加密 不然过去会乱码
{ //这里rst返回的是一个字符串 用逗号把所有的数据隔开
var size = rst.split(",").length;
if(size<=1){
return; //如果没有查询到数据就return掉
}
for(var i=0;i<size-1;i++) //如果有就遍历得到的数据
{ //动态生成tr td 并把输入的字 加粗显示
var trHTML = "<tr><td width='133px;' style='z-index: 100;'>"+rst.split(",")[i].replace(bookName,'<strong>'+bookName+'</strong>')+"</td></tr>";
$("#bookNameTable").append(trHTML); //把生成的数据放table里面
}
$("#bookNameTable tr td").bind('mousedown',function(){ //给tr绑定鼠标按下事件，
$("#word").val(this.innerText);//当鼠标按下 把得到的值 到如表单
});
$("#bookNameTable tr td").bind('mouseover',function(){//当鼠标移动 让数据高亮显示
$(this).css('background-color','blue');
$(this).css('color','white');
});
$("#bookNameTable tr td").bind('mouseout',function(){//当鼠标离开 让数据取消高亮
$(this).css('color','black');
$(this).css('background-color','white');
});
$("#auto").show(); //显示层
}
});

3.struts2 里面 action 内容

HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
response.setHeader("Cache-Control", "no-cache");
response.setContentType("text/json;charset=UTF-8");
PrintWriter out = null;
try {
String bookName = java.net.URLDecoder.decode(request.getParameter("bookName"),"UTF-8");//解密数据
List<TblBook> listBookName = bookDao.getBookNameAjax(bookName);//从数据库得到数据
String rst = "";

for(int i = 0 ;i<listBookName.size();i++)
{
rst+=listBookName.get(i).getBookName()+",";//把数据全放到字符串里面 用逗号隔开
}
out = ServletActionContext.getResponse().getWriter();
out.print(rst);//输出字符串让页面接收
} catch (Exception e) {
}
finally{
if(out != null)
{
out.flush();
out.close();
}
}
return null;