bootstrap select2 tags用法總結

（原創） bootstrap select2 用法總結

前言

最近用到bootstrap 的 select2，官方文件中的例子也很多在此寫一些實際專案中用法總結，有需要的朋友可以借鑑一下。

效果圖

• 無論是固定方式獲取資料還是ajax獲取都需要引入bootstrap.js/css 和 select2.js/css
  及：

{{ stylesheet_link('css/bootstrap.css') }}
{{ stylesheet_link('css/select2.min.css') }} 
{{ stylesheet_link('css/font-awesome.min.css') }} 
{{ stylesheet_link('css/prettify.css') }} 


{{ javascript_include('js/lib/jquery.js') }}
{{ javascript_include('js/lib/select2.full.js') }}
{{ javascript_include('js/lib/bootstrap.js') }}

<div class="container"> 
 <section id="tags" class="row">
    <div class="col-md-4">
       <p>
            <select class="js-example-tags form-control" multiple="multiple">
              <option selected="selected">orange</option>
              <option>white</option>
              <option selected="selected">purple</option>
            </select>
        </p>
    </div>
</section>
</div>
</div>

• 固定方式獲取

$(".js-example-tags").select2({
    tags: true, //是否可以自定義tag
    createSearchChoice:function(term, data) { 
        alert(1);
        if ($(data).filter(function() { 
            return this.text.localeCompare(term)===0; 
        }).length===0) 
        {return {id:term, text:term};} 
    },
    multiple: true,
    data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
});

• ajax方式獲取

$(".js-example-tags").select2({
  // enable tagging
  tags: true,

  // loading remote data
  // see https://select2.github.io/options.html#ajax
  ajax: {
    url: "Ask2/tags",
    processResults: function (data, page) {
      console.log(data);
      var parsed = data;
      var arr = [];
      for(var x in parsed){
          arr.push(parsed[x]); //這個應該是個json物件
      }
      console.log(arr);
      return {
        results: arr
      };
    }
  }
});

說明

在ajax中的資料返回格式應該是這個樣子滴（results）：

      [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]

對應的php程式碼例子

        ...
        $p1 = array(id => "1",text=>"java");
        $p2 = array(id => "2",text=>"jvm");
        $test = array(1=>$p1,2=>$p2);        
        $params['responseData'] = $test;
        $this->view->disable();
        return parent::ajaxResponse($params);