jQuery下拉框搜索插件select2 4.0最新教程分享

现在网上很多select2教程都是很老的教程了，最近在项目中又一次使用到了select2下拉框搜索功能,以前写的教程都不太适合用了，今天分享一个最新的select2 4.0教程。

先到官网下载最新的js，css  下载地址：https://github.com/select2/select2/releases      

下面直接上代码：

html代代码：

1. <select class="form-control" id="inputBmid" name="info[b_mid]"></select> 

js代码：

1. $("#inputBmid").select2({  
2.                 placeholder: data,  
3.                 ajax: {  
4.                     url: "{:U('CreditorAssets/getMember')}",  
5.                     dataType: 'json',  
6.                     delay: 250,  
7.                     data: function (params) {  
8.                         params.offset = 6;  
9.                         return {  
10.                             q: params.term,  
11.                             page: params.page,  
12.                             offset:params.offset  
13.                         };  
14.                     },  
15.                     processResults: function (data, params) {  
16.                         params.page = params.page || 1;  
17.                         var users = data.res || [];  
18.                         var options = [];  
19.                         for (var i = 0, len = users.length; i < len; i++) {  
20.                             var option = {  
21.                                 "id": users[i]["id"],  
22.                                 "text": (users[i]["mobile"] + " (" + users[i]["nickname"]+")")  
23.                             };  
24.                             options.push(option);  
25.                         }  
26.   
27.                         return {  
28.                             results: options,  
29.                             pagination: {  
30.                                 more: (params.page * params.offset) < data.total  
31.                             }  
32.                         };  
33.                     },  
34.                     cache: true  
35.                 },  
36.                 escapeMarkup: function (markup) { return markup; },  
37.                 //minimumInputLength: 1  

38.              // templateResult: formatRepo, 
                  //templateSelection: formatRepoSelection 

39.             });  

说明：

     1.q: params.term 查询参数（params.term表示输入框中内容，q发生到服务器的参数名；所以这里你可以添加自定义参数，如：stype:'person'）

     2.processResults中results: data返回数据（返回最终数据给results，如果我的数据在data.res下，则返回data.res。这个与服务器返回json有关）

     3.minimumInputLength 最小需要输入多少个字符才进行查询，与之相关的maximumSelectionLength表示最大输入限制。

     4.escapeMarkup字符转义处理

     5.templateResult返回结果回调function formatRepo(repo){return repo.text},这样就可以将返回结果的的text显示到下拉框里，当然你可以return repo.text+"1";等

     6.templateSelection选中项回调function formatRepoSelection(repo){return repo.text}

     7.关于返回的 json的格式：select2默认json格式为[{id:1,text:'text'},{id:2,text:'text'}]，新版严格要求这样的格式，当然你可以添加列，如：[{id:1,text:'text',name:'liu'}]

php 后台代码：

1. //查询会员 B5教程网 
2.     public function getMember(){ 
3.         $page = I('page',1,'intval'); 
4.         $q = I('q','','htmlspecialchars,trim'); 
5.         $offset = I('offset'); 
6.         $where=array(); 
7.         if($q){ 
8.             $where['mobile']=array('like',$q.'%'); 
9.         } 
10.         $list = M('member')->field('id,mobile,nickname')->page($page,$offset)->where($where)->select(); 
11.         if($page == 1){ 
12.             array_unshift($list,array('id'=>-1,'mobile'=>'设置B角为空')); 
13.         } 
14.  
15.         $count=M('member')->count(); 
16.         echo json_encode(array('res'=>$list,'total'=>$count));exit; 
17.     }