zoukankan      html  css  js  c++  java
  • jquery.autocomplete插件完美应用

    <%@ 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;
    }
    <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");

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






  • 相关阅读:
    获取其他进程中StatusBar的文本
    TStringGrid多选的复制与拷贝
    常用数据结构
    数据结构及算法
    时间复杂度和空间复杂度详解
    算法的时间复杂度和空间复杂度
    新增并管理媒体资源
    Node.js与MongoDB的基本连接示例
    Web API 2:Action的返回类型
    快递查询组件
  • 原文地址:https://www.cnblogs.com/weir2011/p/2233036.html
Copyright © 2011-2022 走看看