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; width: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("\n", "", $show_user_list); 
        $show_user_list = str_replace("\r", "", $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/