Can't add placeholder to select2 4.0.3 with AJAX for data loading.

[na...@bigdrop.io]

Hey!

I am using select2 4.0.3 in the following manner:

<div class="form-group" >
<select class="form-control course" id="id_populate_course_categories" name="course">
<option value="-1" selected="selected">Select an option</option>
</select>
</div>

And my js is as follows:

$("#id_populate_course_categories").select2({
placeholder: {
id: "-1",
placeholder: "Select an option"
},
allowClear: true,
ajax: {
url: "populate/course/categories/",
dataType: 'json',
delay: 0,
data: function (params) {
return {
q: params.term, // search term
page: $('input[name=level]:checked').val(),
};
},
processResults: function (data, params) {
// parse the results into the format expected by Select2
// since we are using custom formatting functions we do not need to
// alter the remote JSON data, except to indicate that infinite
// scrolling can be used
params.page = params.page || 1;

return {
results: data,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
escapeMarkup: function (markup) {
return markup;
},
"language": {
"noResults": function(){
return "No Courses Found. Try Another Query? ";
}
},
minimumInputLength: 3,
templateResult: formatCourseCategory,
templateSelection: formatCourseCategorySelection,
}).on("change", function (e) {
var option_chosen = $("#select2-id_populate_course_categories-container").text();
$("input[name='course_type']").val(option_chosen);
console.log($(this).text());
// $('select[name=q_exm]').empty().append('<option value="0">Your Qualifying Exam?</option>');
// $('input[name="q_exm_score"]').hide();
// populate_qualifying_exam(course_option_chosen = option_chosen)
});

I have been unable to make the placeholder show and have tried every possible option. I am adding the placeholder exactly as demonstrated in the 4.0.3 release notes, and yet unable to make it work.

[na...@bigdrop.io]

Hey! I found a solution, and am adding it just in case some else faces this issue.

Basically, the SO answer here: http://stackoverflow.com/questions/30302329/select2-4-0-placeholder-undefined
helped me, looking at this jsfiddle: https://jsfiddle.net/xqhp0z0x/1/

In my code, templateSelection pointed to function formatCourseCategorySelection, which was this:

function formatCourseCategorySelection(repo) {
return repo.name
}

changing this to

function formatCourseCategorySelection(repo) {
return repo.full_name || repo.text;
}

worked.

I believe this is only applicable for select2 4.0.0 and onwards. Also, version 4 does not need an empty option in the select element, as opposed to previous releases. ( they couldn't have possible made this any more difficult to learn )

[Phill Jones]

Joann Fabrics products include a wide range of yarns in every weight, from super fine to super bulky, perfect for all types of projects. Popular brands such as Red Heart, Caron, Big Twist, and Lion Brand are available in many colors and textures. With high-quality materials and endless options, Joann Fabrics products inspire creativity for every crafter.

[Emma Snow]

Nofal Apparel specializes in manufacturing custom denim and jeans, offering styles like skinny, slim-fit, ripped, and cargo. They use premium denim fabrics and provide low minimum order quantities, making them ideal for businesses and designers. With global export capabilities, Nofal Apparel delivers high-quality denim products to clients worldwide.

[Brahim Diaz]

恋みくじ 無料は 神社の伝統に基づいた恋愛運を無料で占える人気のオンラインツールです。神社で引くおみくじのように、恋愛や人間関係、将来の出会いについて楽しくて参考になる結果を提供します。手軽にアクセスでき、神社の雰囲気を感じながら楽しめるため、恋みくじ 無料は恋の運勢を知りたい人にぴったりです。

[Luna lee]

Max Studio offers contemporary fashion that blends style, comfort, and quality for everyday wear. Their collections feature modern designs, versatile pieces, and timeless essentials suitable for any occasion. With Max Studio, you can express your personal style while enjoying well-crafted, fashionable clothing.

[Lilly Snow]

Gander Mountain provides a wide range of outdoor and sporting goods for hunters, anglers, campers, and hikers. They focus on high-quality equipment and reliable gear to enhance every outdoor adventure. With expert advice and trusted products, Gander Mountain makes exploring nature easier and more enjoyable.

[Henry Ashford]

Thanks for sharing the solution! I struggled with the placeholder issue for hours, and your tip about templateSelection finally cleared things up. In my case, I also realized that removing the empty <option> tag helped, just like you mentioned. It’s interesting how small tweaks can fix issues that seem so complicated at first—reminds me of how attention to detail is key, whether you’re coding or managing a brand like Scrod Industries USA, where precision and proper setup make all the difference.

[Henry Ashford]

Thanks for sharing the solution! Struggling with placeholder issues can be so frustrating, and your tip about adjusting templateSelection really clears things up. It’s interesting how small tweaks can make a big difference—just like in clothing production, where attention to detail matters a lot for a brand like Bestest Industries, ensuring quality, style, and consistency in every piece.