asanusi007 / ci4-select2
Integrate select2 with CodeIgniter 4 using composer
Requires
- php: >=8.0
- codeigniter4/framework: ^4.5
Requires (Dev)
- codeigniter4/devkit: ^1.0
README
PHP Library to handle server-side processing for Select2, in a fast and simple way.
Installation
Drop the contents of the download zip into your application library directory, then load library on your controller file. That's it.
How to use it?
In your controller file, add this line to load library:
<?php namespace App\Controllers; use App\Libraries\Select2; class Example extends BaseController {}
on your controller method:
... public function ajax_select2() { $options = array( 'table'=> 'table_name', // name of your table 'id' => 'id', // id of your table field and will be assigned to value attribute of select option <option value="{id}">{text}/option> 'text' => 'text', // text of your table field and will be assigned to text of select option 'additional'=> ['field1','field2'..] // additional data will be assigned to data-* attribute <option data-field="{field}" value="{id}">{text}/option> ); $select2 = new Select2($options); echo json_encode($select2->render()); }
and on your js file :
var _componentSelect2 = function() { if (!$().select2) { console.warn('Warning - select2.min.js is not loaded.'); return; } $('.select2-ajax').each(function(e) { let elm = $(this), options = { allowClear: true, ajax: { url: elm.data('url'), dataType: 'json', delay: 250, data: function(params){ return $.extend({}, params, { term: params.term || '', page: params.page || 1, filter : elm.attr('data-filter') }) }, cache: true, }, templateSelection: function (data, container) { // Add custom attributes to the <option> tag for the selected option if (data.additional !== undefined) { for (var i = data.additional.length - 1; i >= 0; i--) { for (const [key, value] of Object.entries(data.additional[i])) { $(data.element).attr('data-'+ key, value); } } } return data.text; } }; if (elm.data('tags') == 'true') { options.tags = true; options.tokenSeparators = [',', ' ']; } $(elm).select2(options); }); }
and then add this line to your html file :
<select class="select2-ajax" data-url="{base_url('example/ajax_select2')}" data-fouc data-placeholder="-- choose -- "> <option></option> </select>
NOTE: Don't forget to load jquery select2 plugin (js & css) to your html document.
Supported versions of Codeigniter
Select2 Library for Codeigniter 4 has been tested and working on the latest version of Codeigniter (v4.1.3). this not supported for CI 3 anymore and you should be using 4.0
Requirements
Codeigniter > 4.0
Select2 > 4.0.13
PHP > 7.1.3
License
Copyright (c) 2021 Ahmad Sanusi, released under the MIT license