This article summarizes the usage of the component Bootstrap Select2 in some actual projects. It is shared with you. Friends in need can learn from it and avoid detours. The specific content is as follows
Reproduction image:
Whether it is to obtain data in a fixed way or to obtain ajax, bootstrap.js/css and select2.js/css and:
{{ 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> <section id="tags"> <div> <p> <select multiple="multiple"> <option selected="selected">orange</option> <option>white</option> <option selected="selected">purple</option> </select> </p> </div></section></div></div>Fixed way to obtain:
$(".js-example-tags").select2({ tags: true, //Can you customize 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'}]});Get ajax method:
$(".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 }; } }});illustrate
The data return format in ajax should look like this: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
Corresponding php code example
... $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);
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is an introduction to some usage methods of select2, I hope it will be helpful to everyone's learning.