I create a search box with select2 multi-value select boxes. the data on select2 must list of Title Name that are based on the Project I selected before. But Select2 cannot load the data. Also, there is an error
"Uncaught Error: Option 'ajax' is not allowed for Select2 when attached to a element" how to solve it?
This is Controller Page
function get_title_by_keyword()
{
$keyword = $_POST['keyword'];
$cos_id = implode(',', $_POST['cos_id']);
if (isset($keyword)&&isset($cos_id))
{
die(json_encode($this->menu_model->get_title_by_keyword($keyword,$cos_id)));
}
}
This is Model Page
function get_title_by_keyword($keyword,$cos_id){
$query="SELECT t.id as id , t.name text
FROM db_mstr.m_title t
JOIN db_mstr.m_os os ON t.os_id = os.id
JOIN db_mstr.m_os osC ON os.cos_id = osC.id
JOIN db_mstr.m_bp_title bpt ON t.id = bpt.title_id AND bpt.is_deleted=0
JOIN db_mstr.m_bp bp ON bpt.bp_id = bp.id
where t.id like '%$keyword%' and osC.id in ($cos_id)
GROUP BY t.name";
return $this->db->query($query)->result();
}
This is View Page and JS
<label class="control-label col-sm-1">Project</label>
<div class="col-sm-4">
<select required multiple="multiple" id="title_cos" name="title_cos" class="" style="width:100%" data-placeholder="">
<?php
foreach ($comboCompany as $key)
{
?><option value="'<?=$key->value?>'" > <?=$key->text?> <?php
}
?>
</select>
</div>
<label class="control-label col-sm-1" style="padding-left: 4px;padding-right: 3px;">Title Name</label>
<div class="col-sm-4">
<select required multiple="multiple" class="" id=title_list name="title_list" style="width:100%">
<?php
foreach ($comboTitle as $key)
{
?><option value="<?=$key->id?>" > <?=$key->text?> <?php
}
?>
</select>
</div>
<script>
$(document).ready(function(){
$("#title_list").select2({
ajax: {
url: '<?=base_url();?>index.php/menu/get_title_by_keyword',
dataType: 'json',
type: "POST",
quietMillis: 1000,
data: function (term) {
return {
keyword: term,
cos_id: $('#title_cos').val()
};
},
results: function (data) {
return {
results: data
};
}
},
placeholder: 'Search for Title',
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
minimumInputLength: 3,
});
});
</script>
