搜索框输入内容,动态显示提示(ajax)

演示


搜索框输入内容,动态显示提示(ajax)_第1张图片


搜索框输入内容,动态显示提示(ajax)_第2张图片

1.为输入框绑定时间,输入内容激活事件。(这段是输入框的代码)(页面1)

			

2.获取输入的内容(页面1)

	
	

3.ajax将内容提交到服务器去查询,并用List转成json格式的字符串(页面2)

4.在web层使用‘json’的转换工具将集合‘List’转成json格式的字符串(页面2)

5.通过‘response.getWriter().write(json);’把json的字符串返还到‘$.post()’方法中(页面2)

	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		//获得关键字
		String word = request.getParameter("word");
		//查询该关键字的所有商品
		ImgService service = new ImgService();
		List imgList = null;
		try {
			imgList = service.findImgByWord(word);
		} catch (SQLException e) {
			e.printStackTrace();
		}
		
		//["xiaomi","huawei",""...]
		
		//使用json的转换工具将对象或集合转成json格式的字符串
		/*JSONArray fromObject = JSONArray.fromObject(productList);
		String string = fromObject.toString();
		System.out.println(string);*/
		
		//谷歌的json转换工具
		Gson gson = new Gson();
		String json = gson.toJson(imgList);
		//System.out.println(json);
		
		response.setContentType("text/html;charset=UTF-8");
		
		response.getWriter().write(json);//这里是把ajax方法中的响应数据返回过去(jspn类型)
		
	}
		 
  

6.遍历‘json’字符串,获取里面的每段文字,一段文字做一行,添加到‘html’中动态显示(页面1)

					//3、将返回的商品的名称 现在showDiv中
					if(data.length>0){
						for(var i=0;i";
						}
						$("#showDiv1").html(content);
						$("#showDiv1").css("display","block");
					}
					if(obj.value.length==0){//判断输入框是否为空,如果为空则隐藏提示区域
						$("#showDiv1").css("display","none");
					}

6.1 查询代码-service层

	//动态查询(输入框)关键字
	public List findImgByWord(String word) throws SQLException {
		ImgDao dao = new ImgDao();
		return dao.findImgByWord(word);
	} 
  

6.2 查询代码-dao层

	//动态查询(输入框)关键字
	public List findImgByWord(String word) throws SQLException {
		QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
		String sql = "select * from systemimage where img_sort like ? limit 0,8";
		List query = runner.query(sql, new ColumnListHandler("img_sort"), "%"+word+"%");
		return query;
	} 
  

7.设置一点‘jQuery’样式

		function overFn(obj){//鼠标在上面
			$(obj).css("background","#F0F8FF");
		}
		function outFn(obj){//鼠标离开
			$(obj).css("background","white");
		}
		function clickFn(obj){//鼠标点击
			$("#search1").val($(obj).html());
			$("#showDiv1").css("display","none");
		}
8.插件使用:json转换插件  Gson(谷歌出品)

你可能感兴趣的:(JAVA)