使用通过烧瓶 render_template() 的列表的 HTML 多选下拉菜单

Question

我用 Python 编写了 2 年，但对 html 完全陌生，并且很难找到适合我需要的解决方案。我喜欢从语法到有效性的一些指导，并欢迎提出建议：

我正在使用 flask ，从 BigQuery 表的一列中提取数据列表（字符串值），8000~ 个字符串值，我希望在我的 UI 中将列表显示为多选下拉列表。可以选择的数量限制——最多 30 个。通过“render_template”flask 函数将它传递给我的 HTML 代码文件，我不知道我应该如何实现一个多选下拉列表，它的内容是我的数据列表。

data_df = get_bq_table_as_df()
data_lst = data_df.to_list()
    return render_template("tool_kpi.html", kpis=data_lst)

我的 html 代码（在 "input=class" 行之后，我希望放置我的下拉对象内容）：

 <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>
                </label>

用户界面是（不要介意样式）：user input

我并不真正关心下拉菜单的外观，只要它允许多选，具有显示每个值的功能，带有字符输入过滤器（带有输入字符的值显示给用户)

Answer 1

要允许在select 元素中进行多项选择，请将属性multiple 添加到您的选择元素中。请参阅documentation。你的代码应该是这样的

    <select name="myselect" multiple>
        {% for k in kpis %} 
            <option value="{{k}}">{{k}}</option>
        {% endfor %}
    </select>

要允许在用户开始输入时过滤列表，您需要一个插件。谷歌 - '多选插件'并找到适合你的东西。