使用 Flask、Jquery、Javascript、MySQL 自动完成

尼莱什·库马尔

这是我的 html 文件，我试图在其中使用自动完成功能，我想使用从 MySQL 查询中获得的数据，即 first_name 和 last_name。我正在使用 Flask 传递这些数据，但我无法将其用于自动完成功能。

数据格式：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"]]

是错的。有关详细信息，请参阅选项源。

如果您无法更改服务器上的数组，则始终可以在客户端上将其展平：

[].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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。