jquery.autocomplete插件完美应用

最新推荐文章于 2018-04-28 18:41:20 发布

weir_威尔

最新推荐文章于 2018-04-28 18:41:20 发布

阅读量86

点赞数

分类专栏： jquery 文章标签： jquery ViewUI

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">  <head>    <base href="<%=basePath%>">        <title>My JSP 'MyJsp.jsp' starting page</title>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <script type="text/javascript" src="datePicker/WdatePicker.js"></script>    <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.autocomplete.js"></script> <link rel="Stylesheet" type="text/css" href="css/jquery.autocomplete.css"/><script type="text/javascript"> $().ready(function() {  $("#staffCode").autocomplete("baseinfo/autocomplete.action",{   minChars: 1,  //最小显示条数   max: 15,  //最大显示条数//scroll: true,//最多可以显示150个结果   autoFill: false,   dataType : "json",  //指定数据类型的渲染方式   extraParams:{    staffCode:function(){     return $("#staffCode").val();//url的参数传递    }   },   parse: function(data){    var rows = [];    var d = data;    for(var i=0; i<d.length; i++){     rows[rows.length] = {       data:d[i],       value:d[i],       result:d[i].staffCode     };    }    return rows;   },   formatItem: function(row,i,n) {    return row.staffCode+""+row.staffStaffName;   }  }).result (function(event, data, formatted) {   $("#staffId").val(data.staffPid);   $("#staffStaffName").val(data.staffStaffName);  });    $("#staffStaffName").autocomplete("baseinfo/autocomplete.action",{   minChars: 1,   max: 15,   autoFill: false,   dataType : "json",   extraParams:{    staffStaffName:function(){     return $("#staffStaffName").val();    }   },   parse: function(data){    var rows = [];    var d = data;    for(var i=0; i<d.length; i++){     rows[rows.length] = {       data:d[i],       value:d[i],       result:d[i].staffStaffName     };    }    return rows;   },   formatItem: function(row,i,n) {    return row.staffStaffName+""+row.staffCode;   }  }).result (function(event, data, formatted) {   $("#staffId").val(data.staffPid);   $("#staffCode").val(data.staffCode);  }); });</script>  </head>  <body><br/><br/><br/>  <input type="text" onClick="WdatePicker()"> <font color=red>&lt;- 点我弹出日期控件</font><br/>  <input type="hidden" name="staffPid" id="staffId"/>  工号：<input type="text" id="staffCode"/>  姓名：<input type="text" id="staffStaffName"/>  </body></html>

程序：

/**     * 自动补全     * @return     * @throws Exception     */    public String autocomplete() throws Exception {        HttpServletResponse response = ServletActionContext.getResponse();        List<Staff> staffs = null;        String n = request.getParameter("staffStaffName");        if (BaseUtil.isEmpty(getStaffCode())) {            staffs = staffService.findByPropertyauto("staffCode", getStaffCode().trim());        }        if (BaseUtil.isEmpty(n)) {            String name = new String(n.getBytes("ISO-8859-1"),"UTF-8");            staffs = staffService.findByPropertyauto("staffStaffName", name.trim());        }        if (BaseUtil.isEmptyList(staffs)) {            List<AutoStaff> autoStaffs = new ArrayList<AutoStaff>();            for (Staff staff : staffs) {                autoStaffs.add(new AutoStaff(staff.getStaffPid(), staff.getStaffCode(), staff.getStaffStaffName()));            }            Gson gson = new Gson();            String result = gson.toJson(autoStaffs);            response.setContentType("text/json;charset=utf-8");            response.setHeader("Chache=Control", "no-cache");            PrintWriter outWriter = response.getWriter();            outWriter.print(result);            outWriter.flush();            outWriter.close();        }        return SUCCESS;    }

struts.xml：

<action name="autocomplete" class="com.fms.web.action.baseinfo.StaffManageAction" method="autocomplete">         <interceptor-ref name="permissionStack"/>          <result type="json">            <param name="root">result</param>          </result>       </action>

web控制层struts2

<input type="hidden" name="staffPid" id="staffId"/>  工号：<input type="text" id="staffCode"/>  姓名：<input type="text" id="staffStaffName"/>

通过工号的自动补全可获取staffCode、staffStaffName、staffPid（隐藏Id），

通过姓名的自动补全可获取也可以获取staffCode、staffStaffName、staffPid（隐藏Id）。

巧妙的应用在于：

.result (function(event, data, formatted) {            $("#staffId").val(data.staffPid);            $("#staffCode").val(data.staffCode);        });



.result (function(event, data, formatted) {            $("#staffId").val(data.staffPid);            $("#staffStaffName").val(data.staffStaffName);        });

一看就明白怎么回事了，就不多说了。

中文问题也一并解决了：

String n = request.getParameter("staffStaffName");

String name = new String(n.getBytes("ISO-8859-1"),"UTF-8");

至于页面的编码统一一下就可以了。

weir_威尔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery.autocomplete插件完美应用

&lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt;&lt;%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+requ
复制链接

扫一扫

专栏目录