Flask/Bootstrap：为什么 extends bootstrap/base 使我的自动完成无效？

Question

我正在尝试使用 wtfforms 的一些基本自动完成功能，但是当我使用像 bootstrap 这样的主题时，我无法让自动完成工作。当我们删除这行代码时自动完成工作：

{% extends 'bootstrap/base.html' %}

如何在使用这些主题的同时保留自动完成功能？

# search.html

{% import "bootstrap/wtf.html" as wtf %}

<!-- This will break the autocomplete
{% extends 'bootstrap/base.html' %}
-->

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
</head>


{% block content %}


{{ wtf.quick_form(form) }}

<script>
    $(function() {
        $.ajax({
            url: '{{ url_for("autocomplete") }}'
            }).done(function (data){
                $('#city_autocomplete').autocomplete({
                    source: data,
                    minLength: 2
                });
            });
        });
</script>


{% endblock %}

# app.py

from flask import Flask, Response, render_template, request
from flask_wtf import FlaskForm
import json
from wtforms import TextField
from flask_bootstrap import Bootstrap

app = Flask(__name__)
Bootstrap(app)
app.config['SECRET_KEY'] = 'big secret'

cities = ["Bratislava",
          "Banská Bystrica",
          "Prešov",
          "Považská Bystrica",
          "Žilina",
          "Košice",
          "Ružomberok",
          "Zvolen",
          "Poprad"]


class SearchForm(FlaskForm):
    autocomp = TextField('Insert City', id='city_autocomplete')


@app.route('/_autocomplete', methods=['GET'])
def autocomplete():
    return Response(json.dumps(cities), mimetype='application/json')


@app.route('/', methods=['GET', 'POST'])
def index():
    form = SearchForm(request.form)
    return render_template("search.html", form=form)

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

Answer 1

事实证明，您必须 post 在引导程序之前编写脚本，如下所示：

{% block scripts %}
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
</head>
{% endblock %}

Flask/Bootstrap：为什么 extends bootstrap/base 使我的自动完成无效？

Flask/Bootstrap: Why is extends bootstrap/base nullifying my autocomplete?

jinja2

flask

twitter-bootstrap

flask-wtforms