javascripthtmljqueryjquery-select2jquery-select2-4

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:

enter image description here

  1. 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?

    enter image description here

    If I scrolled to down its showing as selected, but not automatically its happening

    enter image description here

  2. 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

    enter image description here

I updated my script code for better understanding below:

<script>
    $('.selectsearch').select2({
        // tags: 'true',
        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) {
                // Intercept the query as it is happening
                query = params;
                // Change this to be appropriate for your application
                return 'Searching...';
            }
        },
        cache: true,
    });
</script>
Solution

  • 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>