SELECT2 Multiple HTML Opsi
// took a day to figure out. Finally did it.
// select2 box with "multiple" "html" options with "remote ajax data"
// created this as a php file to fetch remote data
<?php
if (isset($_POST['db_leadsift_params'])) {
$data = [
['company_id'=>1, 'company_name'=>'a company', 'industry'=>'a industry'],
['company_id'=>2, 'company_name'=>'b company', 'industry'=>'b industry'],
['company_id'=>3, 'company_name'=>'c company', 'industry'=>'c industry'],
];
echo json_encode($data);
exit();
}
?>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<select id="db_filter_company_name" data-param_type="company_name" style="width: 700px">
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$(document).ready(function() {
$('#db_filter_company_name').select2({
closeOnSelect : false,
multiple: true,
allowHtml: true,
allowClear: true,
placeholder: 'Company Name',
templateResult: select2formatCustom, //add html to options
escapeMarkup: function(markup) { //to actually show custom html
return markup;
},
templateSelection: function(data) { //shows value after selection inside select input box
return data.text1;
},
ajax: {
url: "",
dataType: 'json',
type: "POST",
quietMillis: 2000,
data: function (term) {
return {
term: term,
db_leadsift_params: 1,
};
},
processResults: function (data) {
return {
results: $.map(data, function(obj) {
return { id: obj.company_id, text1: obj.company_name, text2: obj.industry };
})
};
}
}
});
function select2formatCustom (state) {
if (state.loading) return "Searching...";
return '<div>'
+'<input type="checkbox" class="select2_my_checkbox" id="select2_my_checkbox'+state.id+'" data-id="'+state.id+'" />'
+state.text1+'</div> <p style="margin:0px">'+state.text2+'</p>';
};
//important part
$(document).on("click",".select2-results__option",function() {
var id = $(this).find('.select2_my_checkbox').data('id');
if ($(this).hasClass('myactive')) {
console.log('uncheck')
$("#db_filter_company_name option[value="+id+"]").prop("selected", false); //most important
$("#db_filter_company_name").trigger("change"); //most important
$("#select2_my_checkbox"+id).prop("checked", false);
$(this).attr("aria-selected", false);
$(this).removeClass('myactive');
} else {
console.log('check')
$("#db_filter_company_name option[value="+id+"]").prop("selected", true); //most important
$("#db_filter_company_name").trigger("change"); //most important
$("#select2_my_checkbox"+id).prop("checked", true);
$(this).attr("aria-selected", true);
$(this).addClass('myactive');
}
})
});
</script>
Handsome Horse