使用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',width:'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}]}
    }