javascript - 使用 SQLite 和 Flask 搜索自动完成

Question

我环顾四周，似乎找不到一个好的解决方案。我有一个简单的 SQLite DB，其中包含电子产品，并且有一个搜索框，您可以在其中输入产品名称来搜索它。但我想使用自动完成功能，以便用户能够看到与他们正在输入的内容相关的所有产品。

(即，如果他们输入“EOS”，则会有一个小下拉菜单，向他们显示所有带有 EOS 字母的产品，他们可以选择他们想要的产品)

我已经看到 Ajaxx 有一个自动完成功能，但我找不到关于如何在我的应用程序中正确实现它的良好说明(我对编程还很陌生，只有大约 4 个月)。

Answer 1

jQueryUI 将是实现这一点的最快方法。这确实是一个 Javascript 问题，但我会为您提供一些使用 Flask 实现此问题的技巧。

在您的 View 函数中创建基于数据库的产品列表，例如:

def index():
    products = [row.product for row in Products.query.all()]
    return render_template('index.html', products=products)

然后，在您的 HTML/Javascript 中使用以下 Jinja2 语法和过滤器将列表从 Python 转换为 Javascript 可以使用的内容(来自 jQueryUI Docs ):

<script>
$( function() {
    var availableTags = {{ products|tojson|safe }};
    $( "#tags" ).autocomplete({
        source: availableTags
    });
} );
</script>

除了此代码以及 jQuery UI 样式 CSS 之外，您显然还需要构建并包含适当的 jQuery UI 源 JavaScript 文件。