Живой поиск с формами Bootstrap в Flask / Jinga2 - PullRequest
Новая
       200

Живой поиск с формами Bootstrap в Flask / Jinga2

0 голосов
/ 06 августа 2020

Я пытаюсь воспроизвести опцию поиска в реальном времени, как описано здесь https://developer.snapappointments.com/bootstrap-select/examples/ в моем приложении Flask. В приведенном ниже минимальном примере третье поле жестко запрограммировано, как в примере, и оно работает, как ожидалось.

Мое фактическое приложение использует формы WTF / Jinga2, и я не могу понять, как изменить код Jinga2 таким образом, чтобы поиск в реальном времени быть доступным в моем первом SelectField или во втором SelectMultipleField.

Может ли кто-нибудь подсказать, как я могу реализовать живой поиск с использованием формы WTF / Jinga2, чтобы он напоминал рабочий пример? 

from flask import Flask, render_template, request, session, current_app, flash,redirect, url_for, jsonify
from flask_wtf import FlaskForm
from wtforms import StringField, TextField, SubmitField, SelectField, IntegerField, BooleanField, RadioField, FileField, HiddenField,SelectMultipleField
from wtforms.validators import DataRequired, Length
server = Flask(__name__)
server.secret_key = b'_5#y2L"F4Q8z\n\xec]/'

class simpleForm(FlaskForm):
    varlist1 = SelectField('Choose',  [DataRequired()], coerce=str)
    varlist2 = SelectField('Choose',  [DataRequired()], coerce=str) 
    submitA = SubmitField('Get Stuff')
    varlist3 = SelectMultipleField('Choose Test(s):', [DataRequired()], choices=[('', '')])    
        
@server.route('/menu', methods=["post", "get"])
def menu():
    form = simpleForm()
    vars = ['Option 1','Option 2']
    var2list = [['A', 'B', 'C'],['D','E', 'F', 'G'],['1', '2']] 
    vars3 = ['a','b','c','d']
    form.varlist1.choices = vars
    form.varlist2.choices = var2list[0]
    form.varlist3.choices = [(i, i) for i in vars3]
    #form.varlist2.choices = var2list[1] 
    #form.varlist2.choices = var2list[2]
    return render_template('menu.html', form = form)  

if __name__ == '__main__':
    server.run(debug=True)

Вот минимальный html menu.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>
</head>

<title>My Application</title>
<body>

<br><br><br>

<form action="{{url_for('menu')}}" method="POST" enctype="multipart/form-data">

<br>

<div>
    {{ form.varlist2.label}}
    {{ form.varlist2 (class="form-control") }}
    <br>
    {{ form.varlist3.label}}
    {{ form.varlist3 }}
</div>
</form>

<br><br>

<select class="selectpicker" data-live-search="true">
  <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
  <option data-tokens="mustard">Burger, Shake and a Smile</option>
  <option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/i18n/defaults-*.min.js"></script>
</body>
</html>
...