select2插的两种不同使用方法(一次性全部加载和动态ajax加载数据)

一、select2插件是一款可以进行模糊搜索的一款插件,功能比较强大，它的搜索方式存在两种
a.第一种方式是一次性全部加载数据到客户端，存在将所有数据存在浏览器中，每次模糊匹配是，不用请求服务端，直接在浏览器中匹配即可，适用于数据量较小的结果集
b.第二种方式是动态ajax向服务端请求数据，匹配到的结果，返回到客户端进行模糊查询，适用于数据量较大的结果集，否则容易引起浏览器的卡顿。

二、相关插件;

https://cdn.bootcss.com/select2/4.0.6-rc.1/css/select2.css
https://cdn.bootcss.com/select2/4.0.6-rc.1/js/select2.js

三、第一种方式

#前端代码
##html部分;
<label>
    内单号:
    <select name="search[po_id]" id="po_id">
        <option value="">请选择</option>
        <?php foreach ($externalOrderIDsAndPoIDs as $val):?> <!--$externalOrderIDsAndPoIDs是服务端返回的数据结果集 -->
            <option value="<?php echo $val['po_id'];?>" <?php if ($val['po_id'] == $search['po_id']){echo "selected='selected'";}?>><?php echo $val['po_id'];?></option>
        <?php endforeach;?>
    </select>
</label>
##js部分选中即可;
    $(function(){
        $('#po_id').chosen();
    });

四、第二种方式动态ajajx查询后台数据；

#前端代码html部分;
供应商:
<select style="width: 200px" id="companyName"  class="companyName" name="searchArr[companyName]" >
</select>

#前端代码js部分;
//动态加载数据;
  $(document).ready(function () {
       $("#companyName").select2({
           ajax: {
               type: 'POST',
               url: "<?php echo admin_base_url('caiwu/ProcurementPayablePrepaid/getCompanyNamesByName');?>", //数据请求路径
               dataType: 'json',
               delay: 250,
               data: function (params) {
                   return {
                       company: params.term, // search term 请求参数
                       page: params.page,
                   };
               },
               processResults: function (data, params) { //服务端返回结果data
                   params.page = params.page || 1;
                   return {
                       results: data.info.items.map(function (item) {
                           return { //return默认有两个参数id,text，必须这么写不然的话就报错记住,拿个小本本记下来吧
                               id: item.id,  
                               text: item.text
                           }
                       }),//itemList
                       pagination: {
                           more: (params.page * 30) < data.total_count
                       }
                   };
               },
               cache: true
           },
           placeholder: '请选择一个值',//默认文字提示
           language: "zh-CN",
           allowClear: true,//允许清空

           escapeMarkup: function (markup) {
               return markup;
           }, // 返回html实体，防止xss注入;

           formatResult: function formatRepo(repo) {
               return repo.text;
           }, // 函数用来渲染结果

           formatSelection: function formatRepoSelection(repo) {
               return repo.text;
           } // 函数用于呈现当前的选择
       });
   });

###php服务端的数据处理是这样的
  //得到公司名称集合;
  public function getCompanyNamesByName()
  {
      $companyName = $this->input->get_post('company');
      $sql = "SELECT DISTINCT companyName FROM erp_report.`erp_prepayment_report` WHERE companyName IS NOT NULL AND companyName != '' AND companyName like '%{$companyName}%'  LIMIT 0,10";
      $result = $this->db->query($sql)->result_array();
      if(!empty($result)){
         //对应的返回结果的参数是如下结构,和前端保持一致，不然也会来不起了。
         //array('items' =>array(0=>array('id'=>$companyName,'text'=>$companyName)),'total_count' =>count($return['items']))
          foreach($result as $key=> $v){
              $return['items'][$key]['id'] = $v['companyName'];
              $return['items'][$key]['text'] = $v['companyName'];
          }
          $return['total_count'] = count($return['items']);
      }else{
          $return = array(
              'total_count'=>0,
              'items'=>array(
                  0=>array(
                      'id'  =>0,
                      'text'=>'没找到对应供应商'
                  )
              )
          );
      }
      ajax_return($return,true); //返回结果给客户端
  }