Flask 和 Typeahead（引导自动完成 js）答案

【问题标题】：Flask and Typeahead (bootstrap autocomplete js)Flask 和 Typeahead（引导自动完成 js）
【发布时间】：2013-09-02 17:39:14
【问题描述】：

尝试提前输入以在烧瓶中工作，即使是最简单的代码（遵循this tutorial）也不会响应选项列表/突出显示的可能项目。

我只有一个来自flask main.py 的render_template 调用，对应的HTML 看起来像：

<html>
<head>
    <script src="{{ url_for('static',filename='jquery.js') }}"></script>
    <link href="{{ url_for('static',filename='bootstrap.css') }}" rel="stylesheet" type="text/css" />
    <script src="{{ url_for('static',filename='typeahead.js') }}"></script>
</head>
<body>

    <div style="margin: 50px 50px">
        <label for="product_search">Product Search: </label>
        <input id="product_search" type="text" data-provide="typeahead" data-source='["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"]'>
    </div>

</body>

此代码可能是使用本地数据源的最简单的实现。注意-我尝试更改脚本初始化顺序（首先是 jquery，首先是 bootstrap.css，等等），但没有帮助。

Flask/Typeahead 是否存在任何已知问题？知道我错过了什么吗？

【问题讨论】：

标签： jquery flask bootstrap-typeahead

【解决方案1】：

我自己已经有一段时间没有使用预输入了，但是我注意到本教程和您的代码之间的区别在于本教程在预输入输入之后加载脚本。因此：

<html>
<head>
    <script src="{{ url_for('static',filename='jquery.js') }}"></script>
    <link href="{{ url_for('static',filename='bootstrap.css') }}" rel="stylesheet" type="text/css" />
</head>
<body>

    <div style="margin: 50px 50px">
        <label for="product_search">Product Search: </label>
        <input id="product_search" type="text" data-provide="typeahead" data-source='["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"]'>
    </div>

    <script src="{{ url_for('static',filename='typeahead.js') }}"></script>

</body>

如果这也不起作用，请尝试使用 JS 手动触发 typeahead，如 Bootstrap's Site 所示

<html>
<head>
    <script src="{{ url_for('static',filename='jquery.js') }}"></script>
    <link href="{{ url_for('static',filename='bootstrap.css') }}" rel="stylesheet" type="text/css" />
    <script src="{{ url_for('static',filename='typeahead.js') }}"></script>
</head>
<body>

    <div style="margin: 50px 50px">
        <label for="product_search">Product Search: </label>
        <input id="product_search" type="text" data-provide="typeahead" data-source='["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"]'>
    </div>

    <script type="text/javascript">
      $('#product_search').typeahead()
    </script>

</body>

【讨论】：