下拉菜单中的ajax

最新推荐文章于 2021-08-05 17:36:07 发布

租房请下载：房东直租APP

最新推荐文章于 2021-08-05 17:36:07 发布

阅读量544

点赞数

分类专栏： jquery 文章标签：下拉菜单 ajax 下拉选项清除旧信息 empty

本文链接：https://blog.csdn.net/AinUser/article/details/71310086

版权

jquery 专栏收录该内容

73 篇文章 0 订阅

订阅专栏

<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","tr",function(){
					$(this).css("background-color","#ffffff");
				});
				//为提示框中的提示项增加单击事件
				$("tbody").on("click","tr",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;
	}