实现目的:
通过搜索框输入关键字 下面可以自动提醒补全和关键字有关的内容
实现步骤思想:
1. 建包 untis domain web service dao
2. 在web下面的WEB-INF里面建立lib包 导入需要的jar包
1. 登录页面进行操作
JavaScript 键盘事件有以下3种
keydown
键盘按键按下(如果按着不放,会持续触发该事件),可以捕获组合键。
keypress
键盘非功能按键按下(在keydown之后触发,如果按着不放会持续触发该事件),只能捕获单个键。
keyup
键盘按键弹起,可以捕获组合键。
-
找到搜索框 设置id 绑定键盘事件此处绑定onkeyup,设置id 方便后面获得参数
-
绑定键盘事件后 在下面设置div 设置div格式 以便后面弹出补全的内容 设置id 方便后面获取
-
去进行相关操作 获得弹出div对象 设置变量 , 获得键盘输入内容使用$("#id").val 设置变量接收
-
设置 如果变量键盘输入内容是空 则隐藏弹出部分 且返回
-
使用ajax 设置路径 访问参数 以及回调函数 函数包括设置字段名 在这里因为servlet层返回了一个数组类型的json,所以需要遍历 用到 each()方法 ,最后设置返回值类型 json【使用ajax用来向web层传输用户搜素框输入的数据】
2. 在web层建立servlet
- 获得客户端提交的商品名
- 调用业务层 传递商品名
- 获取查询的结果 List集合
- 集合转json 格式
- 响应客户端
3.service层
- 新建dao层 传值 方法
4.dao层查询
- 使用QueryRunner
- 写sql语句 模糊查询
注意:
%:表示任意0个或多个字符。可匹配任意类型和长度的字符,若查询和“三有关的所有内容”,请使用两个百分号(%三%)表示。 - 返回查询内容
代码如下:
js首页查询部分:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<!-- 登录 注册 购物车... -->
<div class="container-fluid">
<div class="col-md-4">
<img src="img/logo2.png" style="width:140px;height:70px "/>
</div>
<div class="col-md-5">
<img src="img/header.png" />
</div>
<div class="col-md-3" style="padding-top:20px">
<ol class="list-inline">
<li><a href="login.jsp">登录</a></li>
<li><a href="register.jsp">注册</a></li>
<li><a href="cart.jsp">购物车</a></li>
<li><a href="order_list.jsp">我的订单</a></li>
</ol>
</div>
</div>
<script type="text/javascript">
function search() {
var proID = $("#proID");
var word = $("#word").val();
//判断如果输入框内输入的除了空格是空的 则自动补全隐藏
if (word.trim()==""){
proID.hide();
return;
}
//ajax获取连接 数据
$.get(
//访问路径
"/test3_723/search",
//访问参数
"word="+word,
//回调函数 取名 显示自动补全部分
function (data) {
proID.show();
var s="";
//组合名字
$.each(data,function (index,element) {
s+="<div onmouseover='over(this)' onmouseout='out(this)'>"+element.pname+"/<div>";
});
proID.html(s);
},
//返回值类型
"json"
);
}
function over(obj) {
$(obj).css("color","red");
}
function out(obj) {
$(obj).css("color","yellow");
}
</script>
<!-- 导航条 -->
<div class="container-fluid">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">首页</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="product_list.htm">手机数码<span class="sr-only">(current)</span></a></li>
<li><a href="#">电脑办公</a></li>
<li><a href="#">电脑办公</a></li>
<li><a href="#">电脑办公</a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" id="word" onkeyup="search()">
</div>
<button type="submit" class="btn btn-default">Submit</button>
<div id="proID" style="border: 1px solid #606060; margin-top: 5px; position: absolute; color: #1d1d1d;z-index: 5;width: 180px;">
</div>
</form>
</div>
</div>
</nav>
</div>
web层 servlet部分:
package cn.cfg.web;
import cn.cfg.domain.Product;
import cn.cfg.service.ProductService;
import com.google.gson.Gson;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
@WebServlet("/search")
public class SearhServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取关键字
String word = request.getParameter("word");
List<Product>list = new ProductService().search(word);
//把list转换成json
Gson gson = new Gson();
String json = gson.toJson(list);
//响应回浏览器
response.setContentType("text/html;charset=utf-8");
response.getWriter().write(json);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
service层
package cn.cfg.service;
import cn.cfg.dao.ProductDao;
import cn.cfg.domain.Product;
import java.sql.SQLException;
import java.util.List;
public class ProductService {
public List<Product> search(String word) {
List<Product>list = null;
try {
list = new ProductDao().search(word);
} catch (SQLException e) {
e.printStackTrace();
}
return list;
}
}
dao层:
package cn.cfg.dao;
import cn.cfg.domain.Product;
import cn.cfg.untils.C3P0Utils;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import java.sql.SQLException;
import java.util.List;
public class ProductDao {
public List<Product> search(String word) throws SQLException {
QueryRunner qr = new QueryRunner(C3P0Utils.getDataSource());
//编写sql语句
String sql="select * from product where pname like ?";
return qr.query(sql,new BeanListHandler<Product>(Product.class),"%"+word+"%");
}
}