1、需要引入jquery-ui.css、jquery.js、jquery-ui.js这三个文件。具体文件可以去官网下载。
2、写一个输入框:<input type="text" id="autoComplete" name="ename">
3、在这个输入框上面绑定autocomplete方法。source的值就是数据源的一个JSON字符串,必须要转换成JSON字符串才可以,所以同时要导入相应的包 。
下面是最终实现的效果:
index.jsp代码:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="css/jquery-ui.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$("#autoComplete").autocomplete({ //给id为autoComplete的元素添加自动完成事件
source : "AutoCompleteServlet?action=getSource", //source为数据源
select : function(event, ui) { //select为元素选择事件
console.log(ui); //可以在控制台看ui的内容
var word = ui.item.value;
window.location.href = "AutoCompleteServlet?action=getSelectedWord&word=" + word;
}
});
});
</script>
</head>
<body>
<input type="text" id="autoComplete" name="ename">
</body>
</html>
select方法是在模糊查询的结果中选出一个确定的值时候的选中事件,我们可以通过console.log(ui)来看这个ui到底是个什么东西。我们可以发现可以通过ui.item.value获得你点击选中的值。
select : function(event, ui) {
var word = ui.item.value; //得到选中项的值
console.log(ui);
}
AutoCompleteServlet的代码如下:
@WebServlet("/AutoCompleteServlet")
public class AutoCompleteServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//通过URL后面通过问号然后拼接参数的形式来进行选择,这样就可以在servlet中写很多方法,然后通过action的参数进行选择使用哪个方法
String action = request.getParameter("action");
switch (action) {
case "getSource":
getSource(request, response);
break;
case "getSelectedWord":
getSelectedWord(request, response);
break;
}
}
//根据输入的某个值进行模糊查询得到一个JSON字符串
protected void getSource(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("term"); //通过term参数得到autocomplete方法传递用来模糊查询的值
EmpDAO empDAO = new EmpDAO();
List<String> list = empDAO.getEmpNames(name);
String jsonList = JSONArray.toJSONString(list); //把列表转换成JSON字符串的格式
PrintWriter pw = response.getWriter(); //通过输出流把结果输出到页面
pw.write(jsonList);
pw.flush();
pw.close();
}
//获得通过select事件选中的那个值,以JSON字符串的形式输出到页面
protected void getSelectedWord(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json"); //设置相应的格式是json格式的才可以正常显示,否则就会乱码
String name = request.getParameter("word");
PrintWriter pw = response.getWriter();
pw.write(name);
pw.flush();
pw.close();
}
}
为什么是通过term参数获得输入的值呢?
write()和print()方法的区别:
write():仅支持输出字符类型数据,字符、字符数组、字符串等
print():可以将各种类型(包括Object)的数据通过默认编码转换成bytes字节形式,这些字节都通过write(int c)方法被输出
response.getWriter()和out的区别:
(1)out和response.getWriter的类不一样,一个是JspWriter,另一个是java.io.PrintWriter。
(2)执行原理不同:
JspWriter相当于一个带缓存功能的printWriter,它不是直接将数据输出到页面,而是将数据刷新到response的缓冲区后再输出,
response.getWriter直接输出数据(response.print()),所以(out.print)只能在其后输出。
(3)、out为jsp的内置对象,刷新jsp页面,自动初始化获得out对象,所以使用out对象是需要刷新页面的,
而response.getWriter()响应信息通过out对象输出到网页上,当响应结束时它自动被关闭,与jsp页面无关,无需刷新页面