前端之家收集整理的这篇文章主要介绍了
下拉菜单中的ajax，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("#c").keyup(function(e){
$.post("${pageContext.request.contextPath}/ajax/nickname","nickname="+$("#c").val(),function(a){
//清除提示框中的旧信息
$("tbody").empty();
//获取输入框中的文本
var txt=$("#c").val();
if(txt.length>0){
//从数据源中检索相关数据
for(var i=0;i<a.length;i++){
//相关
//if(a[i].indexOf(txt)>=0){
$("tbody").append("<tr>"+
"<td>"+a[i].username+"</td>"+
"</tr>"
);
//}
}
$("div").slideDown(200);
}else{
//隐藏提示框
$("div").hide();
}
//为提示框中的提示项增加效果
$("tbody").on("mouSEOver","tr",function(){
$(this).css("background-color","#abcdef");
});
$("tbody").on("mouSEOut","#ffffff");
});
//为提示框中的提示项增加单击事件
$("tbody").on("click",function(){
//将当前tr中的text设置给文本框
var msg=$(this).text();
$("#c").val(msg);
//隐藏提示框
$("div").hide();
});
},"json"
);
});
});
</script>
<body>
<center>
<input id="c" type="text" style="width:202px;margin-bottom:0"/>
<div style="display:none;border:1px solid gray;width:200px">
<table style="width:200px">
<tbody>
</tbody>
</table>
</div>
</center>
</body>
//模糊查询
public String getMessageUsername(){
list = ms.queryMessageUsername(nickname);
//序列化
Object json = JSON.toJSON(list);
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");
try {
response.getWriter().print(json);
response.getWriter().flush();
response.getWriter().close();
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
