Autocomplete插件jQuery搜索提示框实例-后台获取数据

来源：互联网发布：删除数据库所有表数据编辑：程序博客网时间：2024/06/10 11:26

前台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" onclick="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());}

效果图：

阅读全文

0 0