使用Bootstrap的suggest下拉插件

前端代码

/*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','100%'});
});

api链接

数据格式

{"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}]}
    }