First, I want to point out that the latest stable version of select2 is not compatible with Bootstrap5. This is a problem because I am required to use the latest stable version of the libraries, and this is not possible.
In the title, I wrote “generic,” and that is precisely what I am looking for: a generic initialization script that works for all selects that I associate with the “select2” class. In reality, I believe that these should be functions directly integrated into the library.
While waiting for this to happen, I am asking how to achieve it.
The script should activate:
The full-text search field
It is not an essential requirement, but I would like it to be possible, in the case of optgroup in the search field, to write optgroup_name_partial\searcing_characters, i.e., what comes before the slash should be understood as the characters for filtering the groups, and what comes after as filtering the group entries. For example, with
<select name="cars" id="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
If I type “sw\vo” in the search field, I would like to see a list of groups with labels containing “sw” and, within those, the options containing “vo.”
In the options, I would like to write text formatted in HTML and see it actually formatted <option value="volvo"><b>V</b><span style="color:red;">olvo</span></option>. I’m pretty sure this can be done, or at least using a data-* field to indicate the formatted text to be displayed instead of filling in the option tag.
There should also be a way to indicate how to display the selected item(s), for example, if the options are on two lines, I might want the second line to be displayed on the right, in parentheses.
For example, if I have <option><b>James <span style=‘color: red;’>Kirk</span></b><br><small><i>Captain</i></small></option>, once selected, <b>James <span style=‘color: red;’>Kirk</span></b> (<i>Captain</i>) should appear.
A search feature that would be very useful to me is multiple field search. For example, I could have options such as
<option data-search-car=Volvo data-search-model=XC40 data-search-hp=40><span class=car>Volvo</span> <span class=model>XC40</span> <span class=hp>40</span></option> and I would like to be able to search for “car: vo, model: X, hp:>20” without having to write out the full name of the search field.
I can enter various settings in select2({ placeholder: ‘Select an option’}); but the truth is that I would prefer to call <select class="select2 otherClass" data-placeholder=‘Select an option’> so that I don’t have to write a script for every different select that doesn’t use the standard. Similarly, other parameters such as allow-clear, close-on-select, theme, multiple selection, whether it accepts the creation of new entries.