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

我想要做的是使用Materialise CSS创建一个具有自动完成功能的搜索栏。我正在使用一个简单的数组。工作代码：使用Flask和MySQL实现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>

我想要做的是，而不是使用我的脚本中的数组返回到我的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"

有没有人知道这是否有可能？

来源

2017-04-12 Lost

你想要的预期结果是“当用户键入然后进行后期调用瓶子后端并获得相关结果”对吗？ – Pradeepb

@Pradeepb这是正确的。 [示例]（https://icefox0801.github.io/materialize-autocomplete/examples/）但是我只想查询MySQL数据库。 – Lost

我查了很多，并找不到物化CSS支持Ajax调用自动完成。我会建议使用jQuery UI的自动完成（我已经在一个项目中使用它，它完美地工作） – Pradeepb

以下示例使用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 
     }); 
    });

来源

2017-04-13 06:15:05 Pradeepb

谢谢，我得到一个TypeError：必须是str，而不是NoneType 在我的烧瓶部分的代码。任何你有你的python/flask代码的例子吗？ – Lost

检查[this]（https://pastebin.com/Fw8ciGY8） – Pradeepb

这是[mine]（https://pastebin.com/1mWd8Luk）我在哪里得到“cursor.execute（sql，（'％'+ search + '％'）） TypeError：必须是str，而不是NoneType“ – Lost

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

回答

相关问题