使用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自動完成

回答

相關問題