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);