论坛首页 Web前端技术论坛

jquery.autocomplete插件完美应用

浏览 10214 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2011-11-02   最后修改:2011-11-09
<%@ 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");

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

   发表时间:2011-11-08  
看得好辛苦
0 请登录后投票
   发表时间:2011-11-08  
楼主最好格式化下代码啊。。。
0 请登录后投票
   发表时间:2011-11-08  
我试了好几次都没格式化好,我烦了。但大家可以复制一下,在自己的工具里面看看。
0 请登录后投票
   发表时间:2011-11-08  
http://www.cnblogs.com/weir2011/archive/2011/11/02/2233036.html
不想看这个就看这个地址上的,也是我的。
0 请登录后投票
   发表时间:2011-11-08  
乱!                      
0 请登录后投票
   发表时间:2011-11-09  
应该上几张图,这样更有吸引力!
0 请登录后投票
   发表时间:2011-11-09  
其实我这个自动补全与其他的不同在于,不但把json值放在文本框,还可以把json的值放在隐藏的hidden里面。
我实在太笨了,编辑好几次都没有把格式调整过来。
0 请登录后投票
   发表时间:2011-11-09  
终于可以了。
0 请登录后投票
   发表时间:2011-12-31  
Lz 打个包上传交流一下啊
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics