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");
});
})