Jquery Flask和Typeahead（引导自动完成js）_Jquery_Flask_Bootstrap Typeahead

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

jquery flask

Jquery Flask和Typeahead（引导自动完成js）,jquery,flask,bootstrap-typeahead,Jquery,Flask,Bootstrap Typeahead,试图让typeahead在flask中工作，即使是最简单的代码（如下所示）也不会以选项列表/突出显示的可能项目作为响应我只有一个来自flask main.py的render_模板调用，对应的HTML如下所示： <html> <head> <script src="{{ url_for('static',filename='jquery.js') }}"></script> <link href="{{ url_for('st

试图让typeahead在flask中工作，即使是最简单的代码（如下所示）也不会以选项列表/突出显示的可能项目作为响应

我只有一个来自flask main.py的render_模板调用，对应的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优先，等等），但没有帮助

烧瓶/打字机是否存在任何已知问题？知道我遗漏了什么吗？

我自己已经有一段时间没有使用typeahead了，但是我注意到教程和您的代码之间的区别是教程在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手动触发typeahead，如所示


产品搜索：
$（“#产品搜索”）.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" />
    <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>