jquery - 使用 Flask 和 MySQL 实现 CSS 自动完成

Question

我想做的是使用 Materialise CSS 创建一个具有自动完成功能的搜索栏。我使用一个简单的数组来工作。工作代码:

<input type="text" placeholder="search" id="autocomplete-input" class="autocomplete" >

<script>
$(document).ready(function () {
$('input.autocomplete').autocomplete({
    data: {
        "Dog": null,
        "Bear": null,
        "Bull": null,
        "Cat": null
    }
});
});
</script>

我想做的是使用 Flask 返回到我的 MySQL 数据库，而不是在脚本中使用数组。我一直在尝试一些 flask 路线，但没有运气。

@app.route('/autocomplete', methods=['POST', 'GET'])
def autocomplete():
if request.method == 'POST':
    query = request.form['query']
    try:

        with db.cursor() as cursor:
            sql = "SELECT short_name, name FROM table WHERE name LIKE %s"
            cursor.execute(sql('%' + query + '%'))
            result = cursor.fetchall()
    finally:
        a = 2
        return render_template("results.html", search_result=result)
else:

    return "ooops"

有人知道这是否可能吗？

Answer 1

下面的示例使用Jquery-UI。包括this在您的 HTML 文件中。

$(document).ready(function(){
        $('input.autocomplete').autocomplete({
            source: function (request, response) {
                $.ajax('/autocomplete', {
                    'method': 'GET',
                    'data': request
                }).done(function (data) {
                    response(data['items']);
                }).fail(function () {
                    console.log('fail');
                });
            },
            minLength: 3, // minimum Length of characters
        });
    });