FlaskとMySQLを使ったCSSオートコンプリート

Question

私がしようとしているのは、マテリアライズ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 
     }); 
    });