Flask继承bootstrap/base.html后wtfforms自动补全失效如何解决

问题原因 #

你遇到的冲突是因为flask-bootstrap的base.html模板会默认在页面尾部加载一次jQuery库，你自己在head里提前引入的jQuery以及绑定的autocomplete事件，会被后面二次加载的jQuery覆盖，导致功能失效。当你去掉{% extends 'bootstrap/base.html' %}后，没有了二次加载的jQuery，功能自然恢复。

解决方法 #

保留{% extends 'bootstrap/base.html' %}，通过flask-bootstrap提供的模板块注入自定义的CSS和JS，不要自己写完整的head结构，修改后的search.html代码如下：

{% extends 'bootstrap/base.html' %}
{% import "bootstrap/wtf.html" as wtf %}

{# 注入自定义CSS，保留原有Bootstrap样式 #}
{% block styles %}
{{ super() }}
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
{% endblock %}

{% block content %}
{{ wtf.quick_form(form) }}
{% endblock %}

{# 注入自定义JS，先加载Bootstrap自带的jQuery，再加载jQuery UI和业务代码 #}
{% block scripts %}
{{ super() }}
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<script>
    $(function() {
        $.ajax({
            url: '{{ url_for("autocomplete") }}'
            }).done(function (data){
                $('#city_autocomplete').autocomplete({
                    source: data,
                    minLength: 2
                });
            });
        });
</script>
{% endblock %}

核心改动说明 #

• 调用{{ super() }}保留模板块原有内容，不会丢失Bootstrap的默认样式和自带的jQuery库
• 移除了自己写的head标签和重复的jQuery引入，避免二次加载jQuery导致事件绑定失效
• 把jQuery UI和自动补全逻辑放在scripts块尾部，确保依赖的jQuery已经加载完成再执行

app.py无需任何修改，调整模板后重启服务即可同时使用Bootstrap主题和自动补全功能。

内容的提问来源于stack exchange，提问作者John Stud