31.jquery的ajax异步实现搜索提示栏

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/my.js"></script>
<!-- 引入jquery -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>


<script type="text/javascript">
	$(function(){
		//绑定键盘抬起事件
		$("#nameId").keyup(function(){
			
			//先清空大div下所有的子元素    empty()删除匹配的元素集合中所有的子节点。
			$("#content").empty();
			
			var url="${pageContext.request.contextPath}/product";
			//获取到文本框的值
			var val=$(this).val();
			var jsonData={"pname":val,"method":"findPname"};
			//发送异步的请求，获取用户输入的值，发送服务器端
			$.post(url,jsonData,function(data){
				//怎么处理
				//先切分
				var pnames=data.split(",");
				//编写循环
				for(var i=0;i<pnames.length;i++){
					//获取到数据
					var pname=pnames[i];
					//创建div
					var $div=$("<div></div>");
					$div.text(pname);
					
					//创建div后，可以给div绑定事件
					$div.bind("mouseover",function(){
						$(this).css("backgroundColor","red");
					});
					$div.bind("mouseout",function(){
						$(this).css("backgroundColor","white");
					});
					
					//点击事件
					$div.bind("click",function(){
						$("#nameId").val($(this).text());
						//把所有小div清空
						$("#content").empty();
					});
					
					$("#content").append($div);
				}
				//让大div显示出来
				$("#content").show();
			});
		});  
		
		
		//使用json数据的格式
		 $("#nameId").keyup(function(){
			
			$("#content").empty();
			
			var url="${pageContext.request.contextPath}/product";
			var val=$(this).val();
			var jsonData={"pname":val,"method":"findPnameByJson"};
			
			$.post(url,jsonData,function(data){
				//data是Json对象  {"list":[{"pname":"编程思想2","pnum":10,"price":88}]} 
				//获取到数组
				var lists=data.list;
				//遍历
				for(var i=0;i<lists.length;i++){
					//获取每一个商品的对象
					var product=lists[i];
					//通过属性获取值
					var pname=product.pname;
					
					var $div=$("<div></div>");
					$div.text(pname);
					
					//每创建一个div，添加一个事件
					$div.bind("mouseover",function(){
						$(this).css("backgroundColor","red");
					});
					$div.bind("mouseout",function(){
						$(this).css("backgroundColor","white");
					});
					
					//每个小div的点击事件
					$div.bind("click",function(){
						$("#nameId").val($(this).text());
						$("#content").empty();
					});
					
					$("#content").append($div);
				}
				
				$("#content").show();
			},"json");
		}); 
	});

</script>

<div id="divmenu">
	<a
		href="${pageContext.request.contextPath}/product?method=findByPage2&category=文学">文学</a>
	<a
		href="${pageContext.request.contextPath}/product?method=findByPage2&category=生活">生活</a>
	<a
		href="${pageContext.request.contextPath}/product?method=findByPage2&category=计算机">计算机</a>
	<a
		href="${pageContext.request.contextPath}/product?method=findByPage2&category=外语">外语</a>
	<a
		href="${pageContext.request.contextPath}/product?method=findByPage2&category=经营">经管</a>
	<a
		href="${pageContext.request.contextPath}/product?method=findByPage2&category=励志">励志</a>
	<a
		href="${pageContext.request.contextPath}/product?method=findByPage2&category=社科">社科</a>
	<a
		href="${pageContext.request.contextPath}/product?method=findByPage2&category=学术">学术</a>
	<a
		href="${pageContext.request.contextPath}/product?method=findByPage2&category=少儿">少儿</a>
	<a
		href="${pageContext.request.contextPath}/product?method=findByPage2&category=艺术">艺术</a>
	<a
		href="${pageContext.request.contextPath}/product?method=findByPage2&category=原版">原版</a>
	<a
		href="${pageContext.request.contextPath}/product?method=findByPage2&category=科技">科技</a>
	<a
		href="${pageContext.request.contextPath}/product?method=findByPage2&category=考试">考试</a>
	<a
		href="${pageContext.request.contextPath}/product?method=findByPage2&category=生活百科">生活百科</a>
	<a href="${pageContext.request.contextPath}/product?method=findByPage" style="color:#FFFF00">全部商品目录</a>
</div>


<div id="divsearch">
	<form action="${pageContext.request.contextPath}/" method="post">
		<table width="100%" border="0" cellspacing="0">
			<tr>
				<td style="text-align:right; padding-right:220px">
				
				<!-- 完成案例 -->
				Search <input type="text" name="name" class="inputtable"  id="nameId" /> 
					<input type="image" src="images/serchbutton.gif" border="0" style="margin-bottom:-4px">
				</td>
			</tr>
		</table>

	</form>
</div>

<!-- 现在是隐藏的，用来存储书的名称的 --> 
<div id="content" style="background-color:white;width:128px; text-align:left;margin-left:859px;color:black;float:left;margin-top: -20px;display: none">
	<!-- 显示提醒 -->
	<div></div>
	<div></div>
</div>

	/**
	 * 异步的方式获取图书的名称
	 * @param request
	 * @param response
	 * @throws ServletException
	 * @throws IOException
	 */
	public void findPname(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		//获取请求的参数
		String pname=request.getParameter("pname");
		
		//假如书的名称是空的
		if(pname==null || pname.trim().isEmpty()){
			return;
		}
		
		//通过图书的名称去查询数据库
		ProductService ps=new ProductService();
		List<Object> list=ps.findPname(pname);
		
		//如果没有查询到结果
		if(list==null || list.size()==0){
			return;
		}
		
		StringBuffer sb=new StringBuffer();
		
		//响应的字符串
		for(Object str:list){
			sb.append(str);
			sb.append(",");
		}
		
		//数据 =编程思想，故事会，核心技术，
		String msg=sb.toString();
		//去掉末尾的(也可以不去)
		msg=msg.substring(0,msg.length()-1);
		
		//响应字符串
		response.getWriter().print(msg);
	}

	
	/**
	 * 使用json的方式获取图书的
	 * @param request
	 * @param response
	 * @throws ServletException
	 * @throws IOException
	 */
	public void findPnameByJson(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String pname=request.getParameter("pname");
		if(pname==null || pname.trim().isEmpty()){
			return; 
		}
	
		ProductService ps=new ProductService();
		//通过商品的名称，查询符合名称的所有所有商品
		List<Product> list=ps.findPnameByJson(pname);
		
		//使用Jsonlib的工具类，把list转成Json字符串
		
		//使用jsonObject
		JSONObject j=new JSONObject();
		j.put("list", list);
		
		//生成字符串
		String result=j.toString();
		//{"list":[{"category":"计算机","description":"这书比较难！","imgUrl":"","pid":"e865ad86-7ae7-4ce5-84a3-8df890895b71","pname":"编程思想2","pnum":10,"price":88}]}
		System.out.println(result);
		response.getWriter().print(result);
		
	}

	/**
	 * 通过用户输入的图书名称查找图书
	 * @param pname
	 * @return
	 */
	public List<Object> findPname(String pname) {
		ProductDao dao=new ProductDao();
		
		return dao.findPname(pname);
	}

	/**
	 * 通过商品的名称，查询符合名称的所有所有商品
	 * @param pname
	 * @return
	 */
	public List<Product> findPnameByJson(String pname) {
		ProductDao dao=new ProductDao();
		return dao.findPnameByJson(pname);
	}

	/**
	 * 通过用户输入的图书名称查找图书
	 * @param pname
	 * @return
	 */
	public List<Object> findPname(String pname) {
		
		QueryRunner runner=new QueryRunner(MyJdbcUtils.getDataSource());
		String sql="select pname from products where pname like ?";
		
		try {
			return runner.query(sql, new ColumnListHandler(),pname+"%");
		} catch (SQLException e) {
			
			e.printStackTrace();
			throw new RuntimeException(e);
		}
	}
	
	//通过商品的名称，查询符合名称的所有所有商品
	public List<Product> findPnameByJson(String pname) {
		QueryRunner runner=new QueryRunner(MyJdbcUtils.getDataSource());
		String sql="select * from products where pname like ?";
		
		try {
			return runner.query(sql, new BeanListHandler<Product>(Product.class),pname+"%");
		} catch (SQLException e) {
			
			e.printStackTrace();
			throw new RuntimeException(e);
		}
	}