jquery的autocomplete

来源：互联网发布：淘宝代充为什么便宜编辑：程序博客网时间：2024/05/16 12:26

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页面无关，无需刷新页面

阅读全文

0 0