<select class="form-select" id="category" name="category"> </select>
$('#category').select2({
ajax: {
url: "/Scraper/search-categories",
dataType: 'json',
delay: 250,
placeholder: 'Search by category',
multiple: true,
data: function(params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function(data, params) {
params.page = params.page || 1;
return {
results: data.data,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true,
},
placeholder: 'Search for a category',
minimumInputLength: 1,
templateResult: formatCategory,
templateSelection: formatRepoSelectionCategory,
theme: "bootstrap5"
});
function formatCategory(repo) {
if (repo.loading) {
return repo.text;
}
var $container = $(
"<div class='select2-result-repository clearfix'>" +
"<div class='select2-result-repository__meta'>" +
"<div class='select2-result-repository__title'></div>" +
"</div>" +
"</div>"
);
$container.find(".select2-result-repository__title").text(repo.category_name);
return $container;
}
function formatRepoSelectionCategory(repo) {
return repo.category_name || repo.text;
}
the select element closed has no border around it, just the placeholder