Question

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

（即如果他们输入“EOS”，它会有一个小的下拉列表，显示所有带有EOS字母的产品，他们可以选择他们想要的产品）

我已经看到Ajaxx有一个自动完成功能，但我找不到关于如何在我的应用程序中正确实现它的良好说明（我仍然相当新的编程，只有大约4个月）。

Answer 1

jQueryUI将是实现这一目标的最快捷方式。这实际上是一个Javascript问题，但我会给你一些使用Flask来实现它的技巧。

在您的视图功能中，根据数据库创建产品列表，例如：

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

然后，在您的HTML / Javascript中使用以下Jinja2语法＆amp;过滤器将列表从Python转换为Javascript可以使用的东西（来自jQueryUI Docs）：

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

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

Answer 2

考虑签出polyfill.app，该机制提供了一种从sqlite数据库获得搜索自动完成和REST支持的机制。

使用SQLite＆amp;搜索自动填充功能烧瓶

2 个答案: