如何将标签列表添加到 WTForms > Jinja2 表单>烧瓶？

Question

我正在构建一个 Web 表单，并尝试允许用户自动完成标签列表(很像 StackOverflow 在这里使用(，而无需重新加载表单，然后可以通过单击提交按钮集体提交。

该引擎是一个简单的python函数，它附加了一个空的标签列表，但我似乎无法正确集成该函数。

我怀疑问题是当我单击"添加"按钮时页面正在重新加载，但我不确定，甚至不确定如何防止它。

感谢您的帮助。代码如下：

.HTML：

<form class="centered" action="" method="post" role="form" autocomplete=off>
{{ form.hidden_tag() }}
<p>{{ form.toppings(type="text", list="topps", placeholder="| e.g. cheese, tomato, etc.", **{"onchange":"addTag(tag,tags)"}) }}
<datalist id="topps">
{% for top in topps %}
<option value={{ top }}>
{% endfor %}
</datalist>
<span>{{ form.add(**{"onchange":"addTag(tag,tags)"}) }}</span></p><br>
<p>
{% for tag in tags %}
<span>{{ tag }} {{ form.remove(value="x",**{"onchange":"tags.pop(0)"}) }}</span>
{% endfor %}
</p><br>
<p>{{ form.submit(type="submit", value="Submit") }}</p>
<p>{{ form.reset(type="reset", value="Reset", **{"onchange":"tags=[]"}) }}</p>
</form>

烧瓶蟒蛇：

@app.route('/', methods=['GET', 'POST'])
@app.route('/index', methods=['GET', 'POST'])
def index():
form = ToppingsForm()
topps = Topps.query.all()
tag = ''
tags = []
def addTag(tag,tags):
if tag not in tags:
tags.append(tag)
else:
tag = ''
addTag = addTag(tag,tags)
return render_template('index.html', title='Home', form=form, topps=topps, tag=tag, 
tags=tags, addTag=addTag)

FORMS.py：

from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, BooleanField, SubmitField
from wtforms.validators import DataRequired
class ToppingsForm(FlaskForm):
toppings = StringField('Toppings', validators=[DataRequired()])
agree = BooleanField('Agree', validators=[DataRequired()])
add = SubmitField('Add')
remove = SubmitField('x')
reset = SubmitField('Reset')
submit = SubmitField('Submit')

Answer 1

所以我相信你正在寻找的是wtfform提供的"SelectMultipleField"。 你想要这样的东西：

class ToppingsForm(FlaskForm):
#toppings = StringField('Toppings', validators=[DataRequired()])
toppings = SelectMultipleField('Toppings', choices=[],validators=[DataRequired()])
#agree = BooleanField('Agree', validators=[DataRequired()])
#add = SubmitField('Add')
#remove = SubmitField('x')
#reset = SubmitField('Reset')
submit = SubmitField('Submit')

---

@app.route('/', methods=['GET', 'POST'])
@app.route('/index', methods=['GET', 'POST'])
def index():
form = ToppingsForm()
choices = [("cheese","cheese"), ("tomato","tomato"),("anchovies","anchovies"),("anchovies","mozarella")]
form.toppings.choices = choices #you would change this to something like this[(c.id, c.name) for c in Topps.query.all()]
if form.validate_on_submit():
print(form.toppings.data)
return "success"
return render_template('base.html', title='Home', form=form)

---

查看如何使用 SelectMultipleFields 以获取更多示例