wtforms TextField / SearchField с автозаполнением для приложения фляги (аналогично панели поиска Google) - PullRequest
Новая
       44

wtforms TextField / SearchField с автозаполнением для приложения фляги (аналогично панели поиска Google)

0 голосов
/ 12 октября 2019

Я ищу смесь между SelectField и Textfield wtforms, где можно ввести строку, которая проверяется и автоматически заполняется из заданного списка параметров, как аргумент выбора в SearchField.

В настоящее время яесть эта реализация, которая является просто выпадающим меню, но я хочу, чтобы пользователь мог набрать любую строку. При вводе строки все соответствующие параметры должны отображаться в раскрывающемся списке, как в строке поиска 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()])

1 Ответ

1 голос
/ 13 октября 2019

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>
...