Краткое описание использования тегов bootstrap select2

(оригинал) Краткое описание использования bootstrap select2

Предисловие

Недавно мы использовали select 2 из начальной загрузки. Многие примеры в официальных документах также написаны здесь, чтобы обобщить использование в некоторых практических проектах. Если вам нужно, вы можете извлечь из этого урок.

Эскизный проект

Bootstrap.js/css и select2.js/css должны быть представлены как фиксированным способом, так и Ajax И:

{{ 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') }}

Фиксированный доступ

$(".js-example-tags").select2({
    Tags: true, // can I customize tags
    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]); // this should be a JSON object
      }
      console.log(arr);
      return {
        results: arr
      };
    }
  }
});

Объяснять

Формат возврата данных в Ajax должен быть результатом:

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