Question

尝试让typeahead在flask中工作，即使是最简单的代码（this tutorial之后）也不会响应选项/突出显示的可能项目列表。

我只有一个来自烧瓶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是否存在任何已知问题？我对失踪的想法有所了解吗？

Answer 1

我有一段时间没有使用过typeahead但是我在教程和你的代码之间注意到的不同之处在于教程在输入之前加载了脚本。如此：

<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手动触发预先输入，如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>

Flask和Typeahead（bootstrap autocomplete js）

1 个答案: