Select2组件选中值滚动定位及键盘导航滚动问题求助

针对你遇到的两个滚动定位问题，直接给你修改后的代码和对应的处理逻辑：

问题1：打开下拉框时自动滚动到已选中项 #

通过监听select2:open事件，在下拉框打开后定位到已选中项对应的下拉元素，调用滚动方法让它进入可视区域，模拟原生select的行为。

问题2：键盘导航时自动滚动高亮项 #

监听select2:highlight事件，当键盘选中选项触发高亮时，自动滚动到该高亮元素，确保它始终在下拉框可视范围内。

修改后的完整脚本 #

<script>
    // 声明全局变量存储查询参数，避免未定义报错
    let query;

    $('.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) {
                query = params;
                return 'Searching...';
            }
        },
        cache: true,
    })
    // 处理打开下拉框时的滚动定位
    .on('select2:open', function() {
        const $selectedOption = $(this).find('option:selected');
        if ($selectedOption.length > 0) {
            const $dropdownItem = $('.select2-results__option[aria-selected="true"]');
            if ($dropdownItem.length > 0) {
                $dropdownItem[0].scrollIntoView({
                    behavior: 'smooth',
                    block: 'nearest'
                });
            }
        }
    })
    // 处理键盘导航高亮时的滚动定位
    .on('select2:highlight', function(e) {
        const $highlightedItem = $(e.params.data.element).closest('.select2-results__option');
        if ($highlightedItem.length > 0) {
            $highlightedItem[0].scrollIntoView({
                behavior: 'smooth',
                block: 'nearest'
            });
        }
    });
</script>

补充说明 #

• 新增let query;声明全局变量，修复原代码中未定义变量的潜在报错
• scrollIntoView()的block: 'nearest'配置确保元素不会过度滚动，和原生select的滚动行为一致
• 两个事件监听直接链式绑定在select2实例上，无需额外初始化操作

内容的提问来源于stack exchange，提问作者Mano Mahe