使用Bootstrap的suggest下拉插件

前端代码

/*html代码*/



/*js代码*/







$("#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 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}]}
    }

 

点赞

Leave a Reply

Your email address will not be published. Required fields are marked *