我试图使用一些基本的自动完成功能与wtforms，但我不能得到自动完成的工作，当我使用一个主题，如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)
结果是你必须在引导之前发布你的脚本，像这样:
{% 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 %}