HTML jquery Select2 issue in which selected value is not showing properly

I have integrated Select2 plugin into my project which is working as good as I wanted. But I'm still facing small issues like whenever I scroll down and selected the last value on the select2 options list got selected and closed correctly.

My default initial Select2 input design below:

If I wanted to re-open it the selected value(Group 3) is not automatically shown at top/scrolled to that selected option, so manually again I need to scroll down and see the option making the user uncomfortable isn't it? Is there any solution to make this working properly as like that html select select input works?

If I scrolled to down its showing as selected, but not automatically its happening
Another issue am facing is, whenever the keyboard down key presses to select the option, the highlighted option also not automatically scrolled down and shown within the option list without scrolling it by mouse

ManoMahe

2 years ago

Best Answer

Level 1

After several manual trial and error methods, I found an easy way to fix this issue by just commenting out the theme:'bootstrap5' attribute and using the default theme of select2.

After that, I made some changes to the CSS to fit it into my project. Now my select2 script looks like below:

<script>
    $('.selectsearch').select2({
        // theme: 'bootstrap5',
        dropdownParent: $('.filter-form'),
        placeholder: 'Select an option',
        templateResult: function (item) {
            if (item.loading) {
                return item.text;
            }
            var term = query.term || '';
            var $result = markMatch(item.text, term);
            return $result;
        },
        language: {
            searching: function (params) {
                query = params;
                return 'Searching...';
            }
        },
        cache: true,
    });
</script>

Anyhow I didn't get why, the setting theme:'bootstrap5' did not throw me any exception or error if it does not exist, then why is it not taking default theme settings automatically...

Please or to participate in this conversation.