我正在尝试做的是使用Materialize 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"
有没有人弄清楚这是否可能?
下面的示例
使用 Jquery-UI
. 将其包含在您的 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
});
});