Flask传递列表实现带搜索的多选Dropdown及选择数限制方案咨询

1. 前置依赖引入 #

在HTML的<head>标签里插入以下内容，引入成熟的下拉框组件资源，无需自己手写搜索、多选逻辑：

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

2. 插入下拉框代码 #

按照你的要求，在原有input行之后插入对应组件代码，修改后的完整片段如下：

<div class="card" id="div_SetConfig">
        <form>
                <h2><svg class="icon" aria-hidden="true"></svg>KPI Name</h2>
                <label class="input">
                    <input class="input__field" type="Dropdown" id="KPI Name"/>      
                    <span class="input__label">Please choose your exact KPI</span>
                    <!-- 新增多选下拉框开始 -->
                    <select id="kpi-select" multiple="multiple" style="width: 100%;margin-top: 12px;">
                        {% for kpi in kpis %}
                        <option value="{{ kpi }}">{{ kpi }}</option>
                        {% endfor %}
                    </select>
                    <!-- 新增多选下拉框结束 -->
                </label>

这里用Flask自带的Jinja2模板循环语法，直接遍历你后端传过来的kpis列表自动生成所有选项，不用手动写8000条option。

3. 初始化组件配置 #

在HTML文件末尾</body>标签之前插入以下JS代码，配置你需要的多选、搜索、最多选30个的规则：

<script>
$(document).ready(function() {
    $('#kpi-select').select2({
        placeholder: "请输入关键词搜索并选择KPI",
        allowClear: true,
        maximumSelectionLength: 30,
        width: '100%'
    });
});
</script>

性能优化提示 #

如果8000条数据一次性加载出现卡顿，可以改为后端搜索模式：

• 后端新增一个接口，接收前端传的搜索关键词，返回模糊匹配的KPI列表
• 改写select2的初始化配置，通过ajax参数调用后端接口，只渲染匹配的结果，大幅提升加载速度

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