bootstrap插件—Select2使用

实现效果：

1.显示数据图片

2.支持中文搜索

代码实现：

Web前端代码：

<select name="member" id="member">

<script src="/theme/<?=T_D?>/assets/select2-master/dist/js/select2.js" type="text/javascript" ></script> 
<link href="/theme/<?=T_D?>/assets/select2-master/dist/css/select2.css" rel="stylesheet" type="text/css" />

JS代码：

//设置用户显示列表 
$(function () { 
    //带图片 
    $("#member").select2({ 
        data:[<?php echo $show_user_list;?>],    //json数据格式 
        templateResult: formatState 
    }); 
}); 
function formatState(state) { 
    if (!state.id) { return state.text; }

    var $state = $( 
      "<span><img src=" + state.image + " style='height:40px; 40px'/>"+ state.element.text +"</span>" 
    ); 
    return $state; 
};

//选取用户数据后，将相关参数赋值给其他表单控件 
$("#member").on('select2:select', function (evt) { 
      var user=evt['params']['data']; 
    $("#contacts").val(user['name']); 
    $('#phone').val(user['mobile']); 
    $('#birthday').val(user['birthday']); 
    $('#lang_hidden').val(user['lang']); 
    if(user['gender']==1) 
    { 
        $('#male').parent().attr("class","checked"); 
        $('#female').parent().removeClass("checked"); 
        $("#gender_hidden").val('1'); 
    }else 
    { 
        $('#female').parent().attr("class","checked"); 
        $('#male').parent().removeClass("checked"); 
        $("#gender_hidden").val('2'); 
    } 
    $("#userid_hidden").val(user['id']); 
});

PHP后端代码：

//加载用户列表
        

$sql="select u.id,u.username,u.name,u.mobile,u.gender,u.birthday,u.avatar,tab1.end_time,h.default_lang from ( 
            select * from hc_chat where (data_from='3001' and param=1) or (data_from='7001' and param in (select id from hc_doctor where hospital_id=1))) 
            tab1 left JOIN hc_member u on u.id=tab1.member_id 
            LEFT JOIN hc_country h on h.id=u.country_id 
             order by end_time;"; 
        $user_list=$this->db->query($sql)->result_array(); 
        $show_user_list=''; 
        foreach($user_list as $item) 
        { 
                $show_user_list.="{id:"".$item['id'].""".",text:"".$item['username'].""".",image:"".$item['avatar']."",".''; 
                $show_user_list.="name:"".$item['name'].""".",mobile:"".$item['mobile'].""".",gender:"".$item['gender']."",".''; 
                $show_user_list.="birthday:"".$item['birthday'].""".",end_time:"".$item['end_time'].""".",lang:"".$item['default_lang'].""".'},'; 
            } 
        $show_user_list=substr($show_user_list,0,strlen($show_user_list)-1); 
        $show_user_list = str_replace("
", "", $show_user_list); 
        $show_user_list = str_replace("
", "", $show_user_list);

$data=array( 
             'position'=>$position, 
             'point'=>$point, 
             'user_list'=>$user_list, 
             'show_user_list'=> $show_user_list, 
             'doctor_list'=>$doctor_list 
        );

select2官网：http://select2.github.io/