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数据库。我一直在尝试一些没有运气的烧瓶路线。

@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。在您的HTML文件中加入this。

$(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
        });
    });

使用Flask和MySQL实现CSS自动完成功能

1 个答案: