使用Flask，Jquery，Javascript，MySQL自动完成 [英] Autocomplete using Flask, Jquery , Javascript, MySQL
问题描述
这是我的html文件，我在其中尝试使用自动完成功能，在这里我要使用从MySQL查询中获取的数据first_name和last_name.我正在使用flask传递此数据，但无法将其用于自动完成功能.
This is my html file where I'm trying to use the autocomplete function where I want to use the data which I get from MySQL query which is first_name and last_name. I'm passing this data using flask but I'm unable to use it for autocomplete function.
数据格式: first_name:[["Steven"]，["Stephany"]，["Sonia"]，["Sambit"]，["Chowta"]]
Data format: first_name: [["Steven"], ["Stephany"], ["Sonia"], ["Sambit"], ["Chowta"]]
<html>
<head>
<title>Autocomplete</title>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-darkness/jquery-ui.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<style>
.fixed-height {
padding: 1px;
max-height: 200px;
overflow: auto;
}
</style>
</head>
<link rel="stylesheet" href="/static/style.css" type="text/css">
<form action="/login" method="POST">
<div class="login">
<div class="login-screen">
<div class="app-title">
<h1>Search</h1>
</div>
<div class="login-form">
<div class="control-group">
<input id="firstname" type="text" class="login-field" value="" placeholder="FirstName" name="First Name">
<label class="login-field-icon fui-user" for="login-name"></label>
</div>
<div class="control-group">
<input id="lastname" type="text" class="login-field" value="" placeholder="LastName" name="Last Name">
<label class="login-field-icon fui-lock" for="login-pass"></label>
</div>
<input type="submit" value="Search" class="btn btn-primary btn-large btn-block" >
<br>
<script>
var first = {{ first|tojson }}
var last = {{ last|tojson }}
console.log(first)
$(function() {
$("#firstname").autocomplete({
source: first
});
$("#lastname").autocomplete({
source: last
}).autocomplete("widget").addClass("fixed-height");
});
</script>
</div>
</div>
</div>
</form>
</html>
推荐答案
您的数据格式:
first_name: [["Steven"], ["Stephany"], ["Sonia"], ["Sambit"], ["Chowta"]]
是错误的.有关详细信息，请参见选项源.
is wrong. For details see option source.
如果无法更改服务器上的阵列，则可以始终在客户端上将其展平:
If you cannot change the array on your server you can always flatten it on the client:
[].concat.apply([], first)
var first = [["Steven"], ["Stephany"], ["Sonia"], ["Sambit"], ["Chowta"]];
$(function() {
$("#firstname").autocomplete({
source: [].concat.apply([], first)
});
$("#lastname").autocomplete({
source: [].concat.apply([], first)
}).autocomplete("widget").addClass("fixed-height");
});
.fixed-height {
padding: 1px;
max-height: 200px;
overflow: auto;
}
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<form action="/login" method="POST">
<div class="login">
<div class="login-screen">
<div class="app-title">
<h1>Search</h1>
</div>
<div class="login-form">
<div class="control-group">
<input id="firstname" type="text" class="login-field" value="" placeholder="FirstName" name="First Name">
<label class="login-field-icon fui-user" for="firstname"></label>
</div>
<div class="control-group">
<input id="lastname" type="text" class="login-field" value="" placeholder="LastName" name="Last Name">
<label class="login-field-icon fui-lock" for="lastname"></label>
</div>
<input type="submit" value="Search" class="btn btn-primary btn-large btn-block" >
<br>
</div>
</div>
</div>
</form>
这篇关于使用Flask，Jquery，Javascript，MySQL自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
