bootstrap-select 图片实现

1.简单一点的可以参看官方文档（可以直接撸，英文单词都比较简单）

https://developer.snapappointments.com/bootstrap-select/examples/

 

2. 我这边主要显示的功能（两种效果）

  2.1 不在搜索框中显示头像

2. 第二种 搜索框显示头像

不多说，直接撸代码

1.CSS样式

/******  头像 *******/
.avatar{width:25px;}
.media .username{display: inline-block;line-height:30px;}

2.html内容
   

<select class="form-control selectpicker show-tick"
                                        data-width="85%"
                                        data-live-search="true"
                                        name="nickname" 
                                        id="nicknameID"
                                        >
                                     </select>

3.js

$(document).ready(function() {
 // 初始化select框
    $(".selectpicker").selectpicker({
        //当设置为true，增加了一个搜索框的下拉selectpicker的顶部。
        liveSearch : true,
        //当多个选择时所显示的文本没有选择的选择。
        noneSelectedText : '请选择',
        //显示图片
        showIcon: true,
    });
    
    //初始化刷新数据
    $(window).on('load', function() {
        $('.selectpicker').selectpicker('refresh');
        $(".selectpicker").selectpicker('render');
    });
    
    
    //下拉数据加载
    $.ajax({
        cache: false,
        type : 'POST',
        url : "/phoneWarningWeixin/ajaxFindWexinUser",
        data:{nickname:'Jonny'},
        success : function(datas) {//返回list数据并循环获取
             var select = $("#nicknameID");
            for (var i = 0; i < datas.length; i++) {
                
                //对数据进行封装（第一种不在搜索框中显示头像）
               //var  optionStr = "<option value='"+datas[i].value+"'   data-thumbnail='"+  datas[i].headimgurl  +"' >" + datas[i].text + "</option>";
                




                //data-content内容（第二种在搜索框中显示头像）
                var textContent = '<span class="media">' 
                                               + '<span class="media-left"><img src="' + datas[i].headimgurl + '" class="avatar"></span>' 
                                               + '<span class="media-body username">' + datas[i].text + '</span>' +
                                            '</span>';
                // option内容
                var  optionStr = "<option value='"+datas[i].value +"' data-content='"+ textContent +"' >" + datas[i].text + "</option>";


                select.append(optionStr);
            }
            
            //重新对selet赋值
            $('.selectpicker').selectpicker('val', '');
            $('.selectpicker').selectpicker('refresh'); 
        } 
    }); 
});

4.bootstrap-select.js （实现第一种，不在搜索框中显示头像）

/*    if ($this.data('thumbnail')) {
        // Prepare thumbnail
        text =
          '<span class="media">' +
            '<span class="media-left"><img src="' + $this.data('thumbnail') + '" class="media-object avatar" onerror="src=\'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\'"></span>' +
            '<span class="media-body username">' + text + '</span>' +
          '</span>';
      } else if (!$this.data('content')) {
        // Prepend any icon and append any subtext to the main text
        text = icon + '<span class="text">' + text + subtext + '</span>';
      }*/

          
5.后台代码

/**
     *  根据微信用户昵称查询所有人员信息
     * @param model Model对象用于设置页面数据
     * @param paramsMap HashMap<String, String>对象页面传入参数集合：
     * <p>
     * <li>key=nickname 微信用户昵称</li>
     * </p>
     * @throws IOException  抛出异常
     * @throws AppException 
     */
    @ResponseBody
    @RequestMapping(value="/ajaxFindWexinUser")
    public List<HashMap<String, String>> ajaxFindWexinUser( Model model,
            @RequestParam HashMap<String, String> paramsMap) throws Exception {
        List<HashMap<String, String>> tempList = new ArrayList<HashMap<String, String>>();

        // 查询微信公众号人员信息
        List<WeixinPublicEmployeeDTO> weixinPublicEmployeeList = this.phoneWarningWeixinServiceImpl
                .findWeixinPublicEmployeeList(paramsMap);

        for (int i = 0; i < weixinPublicEmployeeList.size(); i++) {
           WeixinPublicEmployeeDTO weixinPublicEmployeeDTO = (WeixinPublicEmployeeDTO) weixinPublicEmployeeList.get(i);
            HashMap<String, String> aMap = new HashMap<String, String>();
            aMap.put("value", weixinPublicEmployeeDTO.getOpenid());
            aMap.put("text", weixinPublicEmployeeDTO.getNickname());
            aMap.put("headimgurl", weixinPublicEmployeeDTO.getHeadimgurl());
            tempList.add(aMap);
        }
        return tempList;
    }