搜索框输入内容，动态显示提示（ajax）

演示

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

			<form class="input-group input-group-lg" style="margin-top:10px;position:relative;">
			      <input type="text" class="form-control"  placeholder="请输入图片类型" style="font-size: 16px;" οnkeyup="searchWord(this)" id="search1" autocomplete="off">
			      <span class="input-group-btn">
			        <button class="btn btn-default" type="button" style="font-size: 16px;">搜索</button>
			      </span>
		    </form>
			<div id="showDiv1" style="display:none; position:absolute;z-index:1000;top:146px;background:white; width:188px;font-size: 16px;color:black;border:1px solid #ccc;">
				<%//这里用于显示动态提示的数据 %>
			</div>

2.获取输入的内容（页面1）

	<!-- 完成异步搜索//不能同时运行两个不同的ajax，问题暂未解决 -->
	<script type="text/javascript">
	
		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");
		}
		//上面的是提示框的css代码，下面的是ajax获取代码
		function searchWord(obj){
			//1、获得输入框的输入的内容
			var word = $(obj).val();
			//2、根据输入框的内容去数据库中模糊查询---List<Product>
			var content = "";
			$.post(
				"${pageContext.request.contextPath}/searchWord",
				{"word":word},
				function(data){
					//3、将返回的商品的名称 现在showDiv中
					if(data.length>0){
						for(var i=0;i<data.length;i++){
							content+="<div style='padding:5px;cursor:pointer' οnclick='clickFn(this)' οnmοuseοver='overFn(this)' οnmοuseοut='outFn(this)'>"+data[i]+"</div>";
						}
						$("#showDiv1").html(content);
						$("#showDiv1").css("display","block");
					}
					if(obj.value.length==0){//判断输入框是否为空，如果为空则隐藏提示区域
						$("#showDiv1").css("display","none");
					}
				},
				"json"
			);
			
		}
	</script>

3.ajax将内容提交到服务器去查询，并用List<Object>转成json格式的字符串（页面2）

4.在web层使用‘json’的转换工具将集合‘List<Object>’转成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<Object> 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<data.length;i++){
							content+="<div style='padding:5px;cursor:pointer' οnclick='clickFn(this)' οnmοuseοver='overFn(this)' οnmοuseοut='outFn(this)'>"+data[i]+"</div>";
						}
						$("#showDiv1").html(content);
						$("#showDiv1").css("display","block");
					}
					if(obj.value.length==0){//判断输入框是否为空，如果为空则隐藏提示区域
						$("#showDiv1").css("display","none");
					}

6.1 查询代码-service层

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

6.2 查询代码-dao层

	//动态查询（输入框）关键字
	public List<Object> findImgByWord(String word) throws SQLException {
		QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
		String sql = "select * from systemimage where img_sort like ? limit 0,8";
		List<Object> 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（谷歌出品）