前端代码
/*html代码*/ <input type="text" class="form-control search_ul" id="cateCode_search" name="cateCode"> <ul class="dropdown-menu dropdown-menu-right search_ul" role="menu"> </ul> /*js代码*/ <!-- 引入jQuery --> <script src="/${appName}/commons/jslib/hplus/js/jquery.min.js"></script> <!-- 引入bootstrap --> <script type="text/javascript" src="/${appName}/commons/jslib/hplus/js/bootstrap.min.js"></script> <!-- 引入suggest --> <script type="text/javascript" src="/${appName}/commons/jslib/hplus/js/plugins/suggest/bootstrap-suggest.min.js"></script> $("#cateCode_search").bsSuggest('init', { clearable: true, url: "/${appName}/manager/CommonController/getAllCate", showBtn: false, idField: "cate_code", //id字段 keyField: "cate_name", //key字段 effectiveFields: ["cate_code","cate_name"], //显示的有效字段 effectiveFieldsAlias: {"cate_name":"类别","cate_code":"编号"}, //字段别名,title显示 }).on("onSetSelectValue",function(e, keyword) { //选择时 cate_code_add = keyword.id; console.info(cate_code_add); }).on("onUnsetSelectValue",function(e) { cate_code_add = ''; });
/*样式,在body最后加入一个js*/
$(function(){
$('.search_ul').css({left:'0px',width:'100%'});
});
数据格式
{"value":[{"field1":"val1","field2":"val2","field3":val3}]}
后台
/** * 查询所有类别 * */ @RequestMapping(value = "/getAllCate") @ResponseBody public Map getAllCate(HttpServletRequest request, HttpServletResponse response){ List<Concategory> result = commonService.getAllCate(); //获取category集合 Map map = new HashMap(); map.put("value",result); //将list放入key为value的map中 return map; //返回格式{"value":[{"cate_code":"cate1","cate_name":"用餐","cate_level":1}]} }