Autocomplete using Flask, Jquery , Javascript, MySQL

Question

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.

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>

score 0 · Accepted Answer · answered Jun 04 '17 at 18:18

The data format of your:

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>

Autocomplete using Flask, Jquery , Javascript, MySQL

1 Answers1

Linked