有没有办法在 Flask WTForms 中创建数据列表字段？

Question

有谁知道在 Flask 中使用 WTForms 创建

datalist

字段的方法吗？

我知道如何创建

SelectField

但我需要允许用户输入自己的值（如果列表中没有）。

这就是我想做的http://www.w3schools.com/tags/tag_datalist.asp

谢谢

Answer 1

您在视图中创建一个简单的 StringField。

autocomplete_input = StringField('autocomplete_input', validators=[DataRequired()])

在模板中调用该字段并添加列表参数（记住将条目传递到模板）：

{{form.autocomplete_input(list="id_datalist")}}
<datalist id="id_datalist">
{% for entry in entries %}
<option value={{ entry }}>
{% endfor %}
</datalist>

Answer 2

就我而言，使用名为 Select2

的 JS 库更容易

它将常规

<select>

标签转换为可搜索的交互式小部件

这是我模板中的代码

{% block content %}
{# Add styles and js libs #}
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js" defer></script>

{# Old forms initialization here #}
{{super()}}

{# Activate Select2 #}
<script>
    $(document).ready(function() {
        $('#select-tag-id').select2();
    });
</script>
{% endblock %}

另请查看带有示例的文档