1.需求
在输入框输入关键字，下拉框中异步显示与该关键字相关的名称
效果为：
2.代码实现
2.jsp代码
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/jquery-3.3.1.js"></script>
<style type="text/css">
.content {
width: 643px;
margin: 200px auto;
text-align: center;
}
input[type='text'] {
width: 530px;
height: 40px;
font-size: 14px;
}
input[type='button'] {
width: 100px;
height: 46px;
background: #38f;
border: 0;
color: #fff;
font-size: 15px
}
.show {
position: absolute;
width: 535px;
border: 1px solid #999;
border-top: 0;
display: none;
}
</style>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script>
//1.定义页面加载事件
$(function() {
//2.给id是wordId的文本框添扣一个键盘弹起事件
$("#wordId").keyup(function() {
//3.在事件的响应函数中
//a.清空show的div中所有的子标签
$("#show").empty();
//b.获取用户在页面中输入的关键字
var $keyword = $("#wordId").val();
//c.对关键字进行一个非空的判断
if ($keyword.trim() == "") {
$("#show").hide();
return;
}
//d.发送ajax请求，根据关键字去数据库的product表中查询
$.get(
//服务器的请求路径
"/webHeima_login/ProductController",
//发送到服务器的数据
{
word : $keyword
},
//回调函数
function(data) {
//e.在ajax的回调函数中
//遍历数组，获取每一个Product对象
$(data).each(function(index, element) {
//获取对象中的商品名称pname
var pname = element.pname;
//根据商品名称创建div标签对象
var $div = $("<div>" + pname + "</div>");
//表div添加到show的div中
$("#show").append($div).show();
});
},
//预设服务器返回的数据类型
"json"
);
});
});
</script>
</head>
<body>
<div class="content">
<input type="text" name="word" id="wordId">
<input type="button" value="搜索一下">
<div class="show" id="show"></div>
</div>
</body>
</html>
3.damin（ 实体 ）模块
public class User {
private int id;
private String name;
private String password;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
4.service模块
import java.sql.SQLException;
import dao.UserDao;
import domain.User;
public class UserService {
public User findUserByUserName(String username) throws SQLException {
//创建UserDao对象
UserDao userDao=new UserDao();
//使用findUserByUsername方法，获取查询结果
User user = userDao.findUserByUserName(username);
//把查询结果User对象返回web层
return user;
}
}
5.dao模块
import java.sql.SQLException;
import java.util.List;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import domain.Product;
import utils.JDBCUtils;
public class ProductDao {
public List<Product> search(String keyword) throws SQLException {
QueryRunner queryRunner=new QueryRunner(JDBCUtils.getDataSource());
String sql="select * from product where pname like ?";
List<Product> productList = queryRunner.query(sql,new BeanListHandler<Product>(Product.class), "%"+keyword+"%");
return productList;
}
}
6.controller模块
/**
* 搜索动态提示
*/
@WebServlet("/ProductController")
public class ProductController extends HttpServlet {
/**
* 1.获取ajax请求参数keyword
* 2.创建ProductService对象
* 3.调用ProductService对象中的search方法，获取查询结果List<Product>
* 4.把List集合转换为json格式的数据
* 5.把jsor数据响应回ajax的回调函数中
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String keyword=request.getParameter("word");
ProductService productService=new ProductService();
try {
List<Product> list = productService.search(keyword);
ObjectMapper objectMapper=new ObjectMapper();
String json = objectMapper.writeValueAsString(list);
System.out.println(json);
response.setContentType("text/html; charset=utf-8");
response.getWriter().write(json);
} catch (SQLException e) {
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
版权声明：本文为m0_54759967原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。