wtforms烧瓶应用程序具有自动补全功能的TextField / SearchField（类似于Google搜索栏）

debugcn 发表于 Dev

古斯塔夫兹

我正在寻找wtFields的SelectField和Textfield之间的混合，可以在其中输入一个字符串，该字符串可以从给定的选项列表中进行验证和自动完成，例如SearchField中的choice参数。

目前，我有此实现，这只是一个下拉菜单，但我希望用户能够键入任何字符串。输入字符串时，所有匹配的选项都应显示在下拉列表中，例如google搜索栏中。

possible_names = {0:'hans', 1:'sepp', 3:'max'}

class ReusableForm(Form):
  name = SelectField("Enter a Name", 
        choices=[(uuid, name) for uuid, name in possible_names.items()],
        validators=[validators.InputRequired()])

斯塔西耶兹

Select2 JQuery库可能就是您想要的。不幸的是，在Flask本身中无法实现您的目标。JS是必需的。

from flask import Flask, render_template
from flask_wtf import Form
from wtforms import SelectField, validators

app = Flask(__name__)
app.config['SECRET_KEY'] = 'YOUR SECRET KEY'

possible_names = {'0': 'hans', '1': 'sepp', '3': 'max'}  # options should be str so that empty choice option is valid


class ReusableForm(Form):
    name = SelectField("Enter a Name",
                       choices=[("", "")] + [(uuid, name) for uuid, name in possible_names.items()],  # [("", "")] is needed for a placeholder
                       validators=[validators.InputRequired()])

模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
</head>
<body>

<form method="POST">
    {{ form.hidden_tag() }}
    <div style="width: 220px">
        {{ form.name }}
    </div>
    <button>Submit</button>
</form>


<script>
$(document).ready(function() {
    $('#name').select2({  // init Select2 on form's name field
        placeholder: "{{ form.name.label.text }}",
        allowClear: true,
        "width": "style"
    });
});
</script>

</body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。