Автоматично довършване с помощта на Flask, Jquery, Javascript, MySQL

Форматът на данните на вашите:

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" />
<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>