如何修改CAS登录页loginform.html实现Select2搜索选择认证源？

步骤1：准备Select2资源 #

将Select2的CSS和JS文件放置到CAS的静态资源目录（比如cas-server-support-thymeleaf/src/main/resources/static/js和static/css），保证页面能正常加载到这些资源。

步骤2：修改认证源下拉框的HTML结构 #

找到loginform.html中对应认证源选择的<select>元素，为其添加便于识别的class（例如authz-source-select），同时设置占位符优化体验：

<div class="form-group">
    <label for="authnProvider" th:text="#{screen.welcome.select.auth.provider}">Authentication Provider</label>
    <select id="authnProvider" class="form-control authz-source-select" name="authnProvider" th:field="${authnProvider}">
        <option th:each="provider : ${providers}" th:value="${provider.id}" th:text="${provider.name}">Provider</option>
    </select>
</div>

步骤3：添加Select2初始化脚本 #

在loginform.html页面底部添加初始化脚本，绑定目标下拉框：

<script th:src="@{/js/select2.min.js}"></script>
<link th:href="@{/css/select2.min.css}" rel="stylesheet" />

<script>
    document.addEventListener('DOMContentLoaded', function() {
        $('.authz-source-select').select2({
            placeholder: "#{screen.welcome.select.auth.provider.placeholder}",
            width: '100%',
            allowClear: true
        });
    });
</script>

注：占位符文案可在CAS的messages.properties配置文件中定义对应内容。

步骤4：适配CAS默认样式（可选） #

若Select2默认样式与CAS登录页面不协调，可添加自定义CSS调整：

<style>
    .select2-container--default .select2-selection--single {
        border-color: #ced4da;
        height: calc(1.5em + .75rem + 2px);
        border-radius: .25rem;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: calc(1.5em + .75rem);
    }
</style>

注意事项 #

• 确认CAS配置已正确加载静态资源，避免出现404错误
• 测试不同浏览器兼容性，确保Select2功能正常运行

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