使用ajax实时更新查询时的提示词

1、首先在搜索框下面添加一个提示词板（默认隐藏：display: none;），这里我用的ul标签，加上boostrap布局

<form class="navbar-form navbar-right" role="search">
      <div class="form-group">
        <input type="text" class="form-control"  id="searId" placeholder="Search">
      </div>

      <button type="submit" class="btn btn-default hidden-xs">搜索</button>
      
	<%--提示词板--%>
      <div id="completeShow">
      <ul class="list-group"  id="showlist">
  			 <!-- ss -->
	  </ul>
      </div>
</form>

2、给搜索框添加一个键盘点击事件keyup（当按钮被松开时，发生 keyup 事件）。

3、获取搜索框的值

4、使用ajax，在后台与服务器数据库进行数据查找

keyvalue = keyvalue + "%";

String sql = " select * from product1 where  pname like ? or pinyin like ? ";

QueryRunner runner = new QueryRunner(C3P0Utils.getDataSource());

return runner.query(sql, new BeanListHandler<Product>(Product.class), keyvalue,keyvalue);

5、响应回去

Servlet代码：

//处理请求和响应乱码
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");

//接收数据
String keyvalue = request.getParameter("keyvalue");
//依赖service层
Service s = new Service();
//接收list
List<Product> list = null;
try {
    //调用方法获取list
    list = s.findProduct(keyvalue);

} catch (SQLException e) {
    e.printStackTrace();
}
//响应回去
//定义ObjectMapper对象，调用writeValueAsString()方法，转为json格式
ObjectMapper om = new ObjectMapper();
String jsonStr = om.writeValueAsString(list);
response.getWriter().print(jsonStr);

6、最后处理ajax接收到的数据

最终jQuery代码：

$(function () {
	$("#searId").keyup(function () {
		//获取搜索框的值
		var keyValue = this.value;
		if (keyValue.trim() == ""){//如果什么都没写，隐藏提示板，结束事件
			$("#completeShow").hide();
			return;
		}
		//ajax的post请求方式(url,参数，回传函数，返回值类型)
		$.post("${pageContext.request.contextPath}/SearchProductServlet", {keyvalue:keyValue}, function (data) {
			$("#completeShow").show();//显示提示板
			$("#showlist").html("");//清除每次记录，显示新的记录
			if (data == "") { //如果回传回来的数据为“”，也什么都不显示
				$("#completeShow").hide();
				return;
			}
			for (var i in data){ //循环list集合
				$("#showlist").append("<li class='list-group-item'>"+data[i].pname+"</li>")
			}
		}, "json");
	});
})