前台js页面：
$(document).ready(function() { var datas = getData(); $("#roleName").focus().autocomplete(datas, { width: 220, matchContains: true, minChars: 0 }); }); function getData(){ var roleName = $("#roleName").val(); var result; $.ajax({ type : "POST", url : ctx + '/role/findRoleName.mvc', data : {"roleName":roleName}, dataType : "json", cache : false, async:false, success : function(datas) { result = [datas.length]; for(var i=0;i<datas.length;i++){ result[i] = datas[i].roleName; } } }); return result; }
前台jsp页面：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="/kernel/module_bs/include/taglib.jsp"%> <!DOCTYPE html> <html> <head> <%@ include file="/kernel/module_bs/include/top_meta.jsp"%> <title>${lu:get(pageContext,"arch.role.manager")}</title> <%@ include file="/kernel/module_bs/include/top_js.jsp"%> <link href="${ctx}/kernel/module_bs/role/css/role_list.css" rel="stylesheet" /> <script src="${ctx}/kernel/module_bs/role/js/role_list.js" type="text/javascript"></script> <script src="${ctx}/kernel/module_bs/include/js/reset.js"></script> <link href="${ctx}/kernel/main/widget/jquery/jquery-autocomplete/jquery.autocomplete.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="<%=request.getContextPath()%>/kernel/main/widget/jquery/jquery-autocomplete/jquery.autocomplete.js"></script> </head> <body class="bac_body"> <div class="row bac_search"> <div class="row"> <form id="searchForm" action="" method="post" class="form-horizontal"> <div class="col-lg-4 col-md-4 col-sm-4"> <div class="form-group form-dev"> <label for="roleName" class="col-lg-4 col-md-4 col-sm-4 control-label">${lu:get(pageContext,"arch.roleName")}</label> <div class="col-lg-8 col-md-8 col-sm-8"> <input type="text" id="roleName" name="roleName" class="form-control" placeholder=${lu:get(pageContext,"arch.roleName")} value="${qMap['$Q_roleName']}" /> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4"> <div class="form-group form-dev"> <label for="$Q_flag" class="col-lg-4 col-md-4 col-sm-4 control-label">${lu:get(pageContext,"arch.flag")}</label> <div class="col-lg-8 col-md-8 col-sm-8"> <pccw-ui:dic source="role" name="$Q_flag" id="flag" value="" selectLabel='${lu:get(pageContext,"arch.all")}' kind="104" showType="select" attr="required='true' style='width:100%px;' " /> </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-3"> <div class="form-group form-dev"> <button type="button" id="btnSubmit" class="btn btn-primary" >${lu:get(pageContext,"arch.query")}</button> <button type="button" id="resetSubmit" class="btn btn-primary" >${lu:get(pageContext,"arch.reset")}</button> </div> </div> </form> </div> </div> <div class="row bac_list"> <div id="xBtn"> <pccw-ui:xToobar> <pccw-ui:xBtn value='${lu:get(pageContext,"arch.add")}' className="btn btn-default glyphicon glyphicon-plus-sign" οnclick="addInfo();" /> <pccw-ui:xBtn value='${lu:get(pageContext,"arch.enable")}' className="btn btn-default glyphicon glyphicon-ok-sign" id="flag-yes" /> <pccw-ui:xBtn value='${lu:get(pageContext,"arch.disable")}' className="btn btn-default glyphicon glyphicon-remove-sign" id="flag-no" /> </pccw-ui:xToobar> </div> <table id="role-table" class="table-condensed mytable" > </table> </div> </body> </html>
后台获取数据：
spring mvc:
/** * 根据角色名称查询数据 */ @RequestMapping(value = "/findRoleName", method = RequestMethod.POST) public void findRoleName(HttpServletRequest request, HttpServletResponse response, ModelMap model) throws Exception { String querySql = ""; List list = ArchLocalServiceFactory.getRoleService().getList(querySql, "", -1, -1); net.sf.json.JSONArray jsonarray = net.sf.json.JSONArray.fromObject(list); ResponseUtils.renderJson(response, jsonarray.toString()); }
效果图：
