PHP Library to handle server-side processing for Select2, in a fast and simple way.
Drop the contents of the download zip into your application library directory, then load library on your controller file. That's 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.
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
Codeigniter > 4.0
Select2 > 4.0.13
PHP > 7.1.3
Copyright (c) 2021 Ahmad Sanusi, released under the MIT license
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent